如何根据需要在angularjs中更改按钮标签？

Question

我想根据需要在angularjs中更改同一个按钮的标签，同一个按钮可以更新并提交。

See the following demo，

前面的演示是关于复制的模板。如果某个模板已经有数据，则提交按钮的标签应该是Update，否则对于空模板标签应该是Submit。

我不能使用下面的逻辑，因为它会改变与相同标签的所有按钮，但我想说明标签提交只为空，没有空，显示标签更新。我将如何做到这一点？

<a class="btn btn-success" ng-click="updateOrder($index)">{{btnText}}</a> 
And add some logic to your controller, that will specify text for button: 

if (newItem){ 
    $scope.btnText = 'Submit'; 
}else{ 
    $scope.btnText = 'Update'; 
} 

HTML

<div class="col-md-12" style="bottom:10px" > 
    <div class="form-group" ng-repeat="field in fields"> 
     <div class="col-md-12"> 
      <div class="col-md-4"> 
       <label class="col-md-12 control-label">Field1</label> 
       <div class="col-md-12"> 
       <input data-ng-model='field.field1' class="chosen-select input-md form-control sme-input-box"/> 
       </div> 
      </div>   
      <div class="col-md-4">   
      <label class="col-md-12 control-label">Field2</label> 
      <div class="col-md-12">    
       <input ng-model='field.field2' class="chosen-select input-md form-control sme-input-box"/> 
      </div> 
      </div> 
     </div> 

     <div class="col-md-12">    
      <div class="col-md-3"> 
       <a class="btn btn-success" ng-click="removeTemplate($index)">Remove</a> 
      </div> 
      <div class="col-md-3"> 
       <a class="btn btn-success" ng-click="updateOrder($index)">Submit</a> 
      </div>      
     </div> 
     </div>  
     <div class="col-md-3" style="top:5px"> 
       <a class="btn btn-success" ng-click="cloneTemplate()">Add</a> 
     </div> 
    </div> 

Angularjs

$scope.fields=[ 
      { 
       "field1": "", 
       "field2": "", 
      } 
     ] 

     // update and get invoice details 
     $scope.cloneTemplate=function(){ 
      var clone_template={ "field1": "", "field2": ""}; 
      $scope.fields.push(clone_template); 
     } 

     $scope.removeTemplate= function(templateIndex){ 
      $scope.fields.splice(templateIndex,1); 
     } 

     $scope.updateOrder=function(i){ 
      var updateOrder={ 
       "field1":$scope.fields[i].field1, 
       "field2":$scope.fields[i].field2, 
      } 
      alert(updateOrder.field1); 
      $http.post(config.server, updateOrder) 
      .success(function(response, status){ 
       console.log(response);     
      }) 
      .error(function(response, status){ 
       console.log(response); 
      }) 
     } 

Answer 1

据我了解，同时增加了数据，而你想显示Submit按钮标签&显示Update按钮标签，同时更新记录。

因此，正常的做法是从数据库中获取此值，因此我建议您在该对象中添加id列，该列中将包含字段。现在对象看起来像{id: 1, field1: '1', field2: 2}，所以如果元素有id，这意味着它已经存在于数据库中。显然，如果您在字段记录中没有id表示它已从UI添加。

所以整个逻辑会看你的对象的id属性，如果你有ID的记录，然后它会显示Update为按钮标签，否则这将是Submit

<div class="col-md-3"> 
    <a class="btn btn-success" ng-click="updateOrder(field)" 
     ng-bind="field.id? 'Update': 'Submit'"> 
     Submit 
    </a> 
</div>  

因此，对于使你的逻辑运行良好，您需要再次从数据库中获取列表以使您的UI保持一致。

Working Plunkr

Answer 2

更改您的按钮标记表现出一定的范围属性：

<a class="btn btn-success" ng-click="updateOrder($index)">{{btnText}}</a> 

，并添加一些逻辑控制器，将为按钮指定文字：

if (newItem){ 
    $scope.btnText = 'Submit'; 
}else{ 
    $scope.btnText = 'Update'; 
}