如何根據需要在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'; 
}