AngularJS - ngRepeat和ngMessages

时间:2017-02-08 16:09:41

标签: javascript angularjs ng-messages

我很难让ngMessages在ngRepeat循环中工作。请考虑以下示例:

<form name="$ctrl.demoForm.$fc" novalidate>
  <div ng-repeat="tag in $ctrl.demoForm.tags track by $index">
    <div>
      <label>Tag:</label>
      <input name="tag{{$index}}" ng-model="tag.value" type="text" ng-pattern="/^[a-z]*$/">
      <button ng-click="$ctrl.removeTag($index)">Remove</button>
    </div>
    <ng-messages for="$ctrl.demoForm.$fc['tag'+$index].$error">
        <ng-message when="pattern">Must only contain letters.</ng-message>
    </ng-messages>
  </div>
  <button ng-click="$ctrl.addTag()">Add new tag</button>
</form>

我只是迭代存储在$ctrl.demoForm.tags中的一系列标签。我知道ng-repeat每次迭代都会创建一个新范围,因此每个标记都是{value: 'tag value'}之类的对象。

这是与控制器相关的非常基本的东西:

app.controller('DemoCtrl', function() {
  this.demoForm = {
    tags: [
      {value: 'tag 1'}, 
      {value: 'tag 2'}
    ]
  };

  this.addTag = function(){
    this.demoForm.tags.push({value: ''});
  };

  this.removeTag = function(index) {
    if (this.demoForm.tags.length > index) {
      this.demoForm.tags.splice(index, 1);
    }
  };
});

它工作正常,我可以正常添加和删除标签。但是,当字段出错时会出现问题。如果您尝试删除错误字段 字段,则其值会变得混乱。

奇怪的是,实际上删除了良好的字段,只有在出错时它们的值似乎是不同步的。我在jsbin中添加了一个id属性来说明问题,你可以在这里找到它:

http://jsbin.com/nifipatojo/edit?html,js,output

有没有人知道发生了什么?

感谢您的帮助。

0 个答案:

没有答案