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

【问题标题】：How to change button label in angularjs according to requirement?如何根据要求更改angularjs中的按钮标签？
【发布时间】：2016-01-10 16:27:52
【问题描述】：

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

See the following demo,

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

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

【问题讨论】：

标签： javascript jquery angularjs

【解决方案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

【讨论】：

@geeks 用 plunkr 查看更新后的答案会为您提供更多帮助..同时实现相同的 :)
@geeks 是的，我也添加了 plunkr

【解决方案2】：

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

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

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

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

【讨论】：