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

Question

I want to change the label of same button in angularjs according to requirement, same button can be for update and submit.

See the following demo ,

Above demo is about the replicate the template. If some template has already data then label of submit button should be Update, other-wise for empty template label should be Submit.

I can't use following logic because it will change all button with same label, but I want to show label Submit only for empty and no-empty to show label Update . How I will do that?

<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

I understand that while while adding data you wanted to show Submit button label & show Update button label while updating record.

So as normal practice you are getting this value from the DB, so I'd suggest you to add id column in this object which will be there with fields. Now object will look like {id: 1, field1: '1', field2: 2} so if the element has id that means it has persisted in the database. And obviously if you don't have id in fields record means it has been added from UI.

So the whole logic will look at the id property of your object, if you have id in the record then it will show Update as button label otherwise it would be Submit

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

So for make your logic working good, you need to get the list again from the database to make your UI consistent.

Working Plunkr

Answer 2

Change your markup for button to show some scope property:

<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';
}