AngularJs ng-repeat解決迴圈物件出現重複項報錯的問題
阿新 • • 發佈：2018-12-28
問題：ng-repeat 的迴圈物件是不能出現重複項的，所以如果有重複的就會報錯，應該是 key value的問題吧，不是很瞭解內部執行機制；經過查詢發現 在 迴圈後面加上 track by $index 就會解決問題，也就可以有重複物件了
報錯：
劃重點
解決辦法：加上 track by $index
<ul> <li ng-repeat="x in names track by $index"> {{x}}.{{lastname}}<button ng-click="delPerson($index)">刪除</button> </li> </ul>
完整栗子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="myContrl"> <h1>{{lastname}}家族成員：</h1> <ul> <li ng-repeat="x in names track by $index"> {{x}}.{{lastname}} <button ng-click="delPerson($index)">刪除</button> </li> </ul> <p>新增成員： <input type="text" ng-model="name" placeholder="請輸入需要新增的成員名字"> </p> <button ng-click="addPerson(name)">確認新增</button> </div> <script> angular.module('myapp', []) .controller('myContrl', function ($scope, $rootScope) { // $rootScope 根作用域，在素有的控制器中都可以用 $scope.name = ''; $scope.names = ["name1", "name2", "name3", "name4", "name4"]; $scope.sayHellow = function () { $scope.greeting = "Hello," + $scope.name + "!"; } $scope.delPerson = function (index) { // 將點選刪除的物件從陣列中移除，angular會自動更新列表 $scope.names.splice(index, 1); } $scope.addPerson = function (name) { // 輸入的物件新增到陣列，angular會自動更新列表 $scope.names.push(name); } $rootScope.lastname = "Refsnes"; }); //手動初始化 angular.bootstrap(document, ['myapp']); </script> </body> </html>