javascript - 删除表单元素时，AngularJS 验证不同步

Question

我有一个简单的表单，它显示具有多个输入的表单，并且能够删除这些输入。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.numbers = [1,2,3];

    $scope.deleteField = function (number) {
      $scope.numbers.splice($scope.numbers.indexOf(number), 1);
    }
});

对元素进行“必需”验证:

  <form name="theForm">
      <div ng-repeat="number in numbers">
        <input type="text" name="number{{$index}}" ng-model="number" required/>
        <button ng-click="deleteField(number)">Delete</button>
        <span ng-show="theForm.number{{$index}}.$error.required">Number is required</span>
      </div>
  </form>

验证工作正常，直到我删除条目。删除完成后，验证将不同步(错误消息显示在错误的字段上或根本不显示)。

这是运行示例:

http://plnkr.co/edit/wF6c79xAwcZnPAxjf2bW?p=preview

Answer 1

只需在 ng-repeat 中添加track by $index