如何根據需要更改angularjs中的按鈕標簽？

Question

我想根據需要更改angularjs中相同按鈕的標簽，相同按鈕可以用於更新和提交。

參見以下演示 ，

上面的演示是關於復制模板的。 如果某個模板已經有數據，則“提交”按鈕的標簽應為“更新”，否則，為空模板的標簽應為“提交”。

我不能使用以下邏輯，因為它將更改具有相同標簽的所有按鈕，但是我想顯示標簽“僅提交為空”和“不空的”以顯示標簽Update 。 我該怎么做？

<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 as button label，否則將顯示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保持一致。

工作朋克

Answer 2

更改按鈕的標記以顯示一些范圍屬性：

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

並向您的控制器添加一些邏輯，該邏輯將為按鈕指定文本：

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