AngularJS驗證在刪除表單元素時不同步

我有一個簡單的表單，它可以顯示具有多個輸入的表單並能夠刪除這些輸入。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>

驗證正常工作，直到我刪除的條目。一旦刪除完成，驗證不同步（錯誤消息顯示在錯誤的字段中或根本不顯示）。

這裏是正在運行的例子：

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

來源

2015-01-13 alexs333

你只需添加track by $index NG-重複

來源

2015-01-14 00:01:14 floribon

作品一種享受！想知道爲什麼它不是ng-repeat的默認行爲，但肯定可以解決所有問題。 – alexs333

默認情況下ng-重複每個元素的全部內容，在你的情況下，字符串（1,2,3），這也阻止你有兩倍的數組相同的數字（因爲每個項目必須有一個獨特的跟蹤ID）。按照$ index進行跟蹤可以解決這個問題，但是如果數組的項目所在的對象不是字符串，將會阻止更新。如果您想了解更多信息，請閱讀更多關於ng-repeat的示例和教程。 – floribon

AngularJS驗證在刪除表單元素時不同步

回答

相關問題