Question

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

上面的演示是关于复制模板的。如果某个模板已有数据，则提交按钮的标签应为“更新”，否则空模板标签应为“提交”。

我不能使用以下逻辑，因为它会更改所有带有相同标签的按钮，但我想显示标签提交仅用于空和非空显示标签更新。我将如何做到这一点？

<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按钮标签＆amp;更新记录时显示Update按钮标签。

正常情况下，您从数据库中获取此值，因此我建议您在此对象中添加id列，其中包含字段。现在，对象看起来像{id: 1, field1: '1', field2: 2}，所以如果元素具有id，则表示它已持久存储在数据库中。显然，如果您在字段记录中没有id，则意味着它已从UI添加。

因此整个逻辑将查看对象的id属性，如果您在记录中有id，那么它将显示Update作为按钮标签，否则它将是Submit < / p>

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

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

2 个答案: