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

How to change button label in angularjs according to requirement?

本文关键字：angularjs 按钮 标签 何根      更新时间：2023-09-26

我想根据要求更改angularjs中相同按钮的标签，相同按钮可以用于更新和提交。

请参阅以下演示，

上面的演示是关于复制模板的。如果某个模板已经有数据，那么提交按钮的标签应该是更新，对于空模板，其他标签应该是提交。

我不能使用以下逻辑，因为它将更改具有相同标签的所有按钮，但我只想显示标签Submit为空，不想显示标签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);
            })
        }

我知道在添加数据时，您希望显示Submit按钮标签&更新记录时显示Update按钮标签。

因此，通常情况下，您是从DB中获取该值的，因此我建议您在该对象中添加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保持一致。

工作Plunkr

更改按钮的标记以显示一些范围属性：

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

并添加一些逻辑到您的控制器，这将指定文本按钮：

if (newItem){
  $scope.btnText = 'Submit';
}else{
  $scope.btnText = 'Update';
}
相关文章：