Javascript 删除表单元素时AngularJS验证不同步

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

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>

删除
号码是必需的

在我删除条目之前，验证工作正常。删除完成后，验证将失去同步（错误消息显示在错误字段中或根本不显示）

以下是正在运行的示例：

---

只需在你的ng repeat中添加

track by$index

，

就可以了！纳闷为什么这不是ng repeat的默认行为，但肯定能解决所有问题。默认情况下，ng repeat按每个元素的全部内容进行跟踪，在您的情况下是字符串（1,2,3），这也防止了数组中相同数字的两倍（因为每个项都必须具有唯一的跟踪id）。在您的示例中，通过$index进行跟踪可以解决这个问题，但是如果数组的项包含对象而不是字符串，则会阻止更新。如果您想了解更多信息，请阅读更多有关ng的示例和教程。