Angular ng-repeat Error “Duplicates in a repeater are not allowed.”
我正在定义一个自定义筛选器,如下所示:
1 | .... |
如您所见,使用过滤器的ng repeat嵌套在另一个ng repeat中。
过滤器的定义如下:
1 2 3 4 5 6 7 8 9 | myapp.filter('range', function() { return function(input, min, max) { min = parseInt(min); //Make string input int max = parseInt(max); for (var i=min; i<max; i++) input.push(i); return input; }; }); |
我得到:
Error: Duplicates in a repeater are not allowed. Repeater: comment in item.comments | range:1:2 ngRepeatAction@https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an
实际解决方案如下:http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/
AngularJS不允许在ng repeat指令中有重复项。这意味着,如果您尝试执行以下操作,将会得到一个错误。
1 2 | // This code throws the error"Duplicates in a repeater are not allowed. // Repeater: row in [1,1,1] key: number:1" |
但是,稍微更改上面的代码以定义一个索引来确定唯一性,如下所示,这将使它再次工作。
1 | // This will work |
官方文件如下:https://docs.angularjs.org/error/ngrepeat/dupes
对于那些期望JSON但仍然得到相同错误的人,请确保分析数据:
1 | $scope.customers = JSON.parse(data) |
我在我的项目中遇到了一个问题,我使用了$index的ng repeat track,但是当数据来自数据库时,产品没有得到反映。我的代码如下:
1 | <product info="product"></product> |
在上面的代码中,product是显示产品的一个单独的指令,但我知道当我们从作用域传递数据时$index会引起问题。因此无法更新数据丢失和DOM。
我通过使用product.id作为ng的键找到了解决方案,重复如下:
1 | <product info="product"></product> |
但当多个产品具有相同的ID时,上述代码再次失败并引发以下错误:
angular.js:11706错误:[ngrepeat:duppes]中继器中不允许重复。使用"track by"表达式指定唯一键。中继器
最后,我通过制作ng repeat的动态唯一键来解决这个问题,如下所示:
1 | <product info="product"></product> |
这解决了我的问题,希望以后能对你有所帮助。
你打算用你的"范围"过滤器做什么?
下面是一个我认为你想做的工作示例:http://jsfiddle.net/evictor/hz4ep/
HTML:
1 2 3 4 | Item {{$index}} Comment {{$index}} {{comment}} |
JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | angular.module('manyminds', [], function() {}).filter('range', function() { return function(input, min, max) { var range = []; min = parseInt(min); //Make string input int max = parseInt(max); for (var i=min; i<=max; i++) input[i] && range.push(input[i]); return range; }; }); function MainCtrl($scope) { $scope.items = [ { comments: [ 'comment 0 in item 0', 'comment 1 in item 0' ] }, { comments: [ 'comment 0 in item 1', 'comment 1 in item 1', 'comment 2 in item 1', 'comment 3 in item 1' ] } ]; } |
如果在使用SharePoint2010时偶然发生此错误:请重命名.json文件扩展名,并确保更新restservice路径。不需要额外的"按$index跟踪"。
幸运的是,我被转发到这个理由:
.json becomes an important file type in SP2010. SP2010 includes certains webservice endpoints. The location of these files is 14hive\isapi folder. The extension of these files are .json. That is the reason it gives such a error.
"cares only that the contents of a json file is json - not its file extension"
一旦文件扩展名被更改,就应该全部设置。
如果在
- 标记内调用ng repeat,则可以允许重复。参考此链接。参见Todo2.HTML
为了防止其他人发生这种情况,我在这里记录这一情况,我得到了这个错误,因为我错误地将ng模型设置为与ng repeat数组相同:
1 2 3 4 5 6 7 | <select ng-model="list_views"> <option ng-selected="{{view == config.list_view}}" ng-repeat="view in list_views" value="{{view}}"> {{view}} </option> </select> |
而不是:
1 2 3 4 5 6 7 | <select ng-model="config.list_view"> <option ng-selected="{{view == config.list_view}}" ng-repeat="view in list_views" value="{{view}}"> {{view}} </option> </select> |
我检查了数组,没有任何重复项,只需再次检查变量。
中继器中不允许重复。使用"track by"表达式指定唯一键。
1 | Repeater: {0}, Duplicate key: {1}, Duplicate value: {2} |
例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="angular.js"> </head> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> </tr> <tr ng-repeat="person in people track by $index"> <td>{{person.firstName}}</td> <td>{{person.lastName}}</td> <td><input type="button" value="Select" ng-click="showDetails($index)" /></td> </tr> </table> <hr /> <table> <tr ng-repeat="person1 in items track by $index"> <td>{{person1.firstName}}</td> <td>{{person1.lastName}}</td> </tr> </table> <span> {{sayHello()}}</span> var myApp = angular.module("myApp", []); myApp.controller("personController", ['$scope', function ($scope) { $scope.people = [{ firstName:"F1", lastName:"L1" }, { firstName:"F2", lastName:"L2" }, { firstName:"F3", lastName:"L3" }, { firstName:"F4", lastName:"L4" }, { firstName:"F5", lastName:"L5" }] $scope.items = []; $scope.selectedPerson = $scope.people[0]; $scope.showDetails = function (ind) { $scope.selectedPerson = $scope.people[ind]; $scope.items.push($scope.selectedPerson); } $scope.sayHello = function () { return $scope.items.firstName; } }]) </body> </html> |
中继器中不允许重复。使用"track by"表达式指定唯一键。中继器:mydt中的sdetail,重复键:string:,重复值:
I faced this error because i had written wrong database name in my php api part......
因此,当从数据库基获取数据时,也可能发生此错误,因为数据库基的名称被您写错了。
我的回答是这样的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | {"items": [ { "index": 1, "name":"Samantha", "rarity":"Scarborough", "email":"[email protected]" }, { "index": 2, "name":"Amanda", "rarity":"Vick", "email":"[email protected]" }] } |
所以,我用