Angular ng-repeat错误“不允许在中继器中复制。
我正在定义一个自定义filter如下所示:
<div class="idea item" ng-repeat="item in items" isoatom> <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2"> .... </div> </div>
正如你所看到的ng-repeat所使用的filter嵌套在另一个ng-repeat中
filter是这样定义的:
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; }; });
我越来越:
错误:不允许在中继器中复制。 中继器:在item.comments中评论 范围:1:2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an
解决scheme实际上是在这里描述: http : //www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/
AngularJS不允许在ng-repeat指令中重复。 这意味着如果您尝试执行以下操作,将会出现错误。
// This code throws the error "Duplicates in a repeater are not allowed. // Repeater: row in [1,1,1] key: number:1" <div ng-repeat="row in [1,1,1]">
但是,稍微更改上面的代码来定义一个索引来确定唯一性,如下所示将再次工作。
// This will work <div ng-repeat="row in [1,1,1] track by $index">
官方文档在这里: https : //docs.angularjs.org/error/ngRepeat/dupes
对于那些期待JSON,仍然得到相同的错误,请确保您parsing您的数据:
$scope.customers = JSON.parse(data)
你打算如何使用“范围”filter?
这里是我想你想要做的一个工作样本: http : //jsfiddle.net/evictor/hz4Ep/
HTML:
<div ng-app="manyminds" ng-controller="MainCtrl"> <div class="idea item" ng-repeat="item in items" isoatom> Item {{$index}} <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2"> Comment {{$index}} {{comment}} </div> </div> </div>
JS:
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' ] } ]; }
我在我的项目中遇到了一个问题,我在$ index下使用ng-repeat track,但是当数据来自数据库时,产品没有得到反映。 我的代码如下:
<div ng-repeat="product in productList.productList track by $index"> <product info="product"></product> </div>
在上面的代码中,产品是显示产品的单独指令。但是当我们从范围传递数据时,我发现$ index会引起问题。 所以数据丢失和DOM不能更新。
我通过使用product.id作为ng-repeat中的关键字find了解决scheme,如下所示:
<div ng-repeat="product in productList.productList track by product.id"> <product info="product"></product> </div>
但是,上面的代码再次失败,并且当多个产品具有相同的id时抛出下面的错误:
angular.js:11706错误:[ngRepeat:dupes]不允许在中继器中复制。 使用“追踪”expression式来指定唯一的键。 中继器
所以最后我通过制作ng-repeat的dynamic唯一键来解决问题,如下所示:
<div ng-repeat="product in productList.productList track by (product.id + $index)"> <product info="product"></product> </div>
这解决了我的问题,并希望这将在未来帮助你。
如果偶然在使用SharePoint 2010时发生此错误:重命名您的.json文件扩展名,并确保更新您的restServicepath。 没有额外的“由$指数追踪”是必需的。
幸运的是,我把这个链接转发到这个基本原理:
.json在SP2010中成为重要的文件types。 SP2010包含某些Web服务端点。 这些文件的位置是14hive \ isapi文件夹。 这些文件的扩展名是.json。 这就是它给出这样一个错误的原因。
“只关心一个json文件的内容是json – 不是它的文件扩展名”
一旦文件扩展名被改变,应该全部设置。
我的JSON
响应是这样的:
{"items": [ { "index": 1, "name": "Samantha", "rarity": "Scarborough", "email": "maureen@sykes.mk" }, { "index": 2, "name": "Amanda", "rarity": "Vick", "email": "jessica@livingston.mv" }] }
所以,我用ng-repeat = "item in variables.items"
来显示它。
以防其他人发生这种情况,我在这里logging这个,我得到这个错误,因为我错误地设置ng模型相同的ng重复数组:
<select ng-model="list_views"> <option ng-selected="{{view == config.list_view}}" ng-repeat="view in list_views" value="{{view}}"> {{view}} </option> </select>
代替:
<select ng-model="config.list_view"> <option ng-selected="{{view == config.list_view}}" ng-repeat="view in list_views" value="{{view}}"> {{view}} </option> </select>
我检查了数组,没有任何重复,只是仔细检查你的variables。
不允许在中继器中复制。 使用“追踪”expression式来指定唯一的键。
Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}
例
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script src="angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="personController"> <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> </div> <script> 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; } }]) </script> </body> </html>
尝试这个
$http({ method: 'GET', url: url, // your remote url responseType: "json" }). then(function successCallback(response) { //your code when success }, function errorCallback(response) { //your code when fails });
不允许在中继器中复制。 使用“追踪”expression式来指定唯一的键。 中继器:mydt中的sdetail,重复键:string:,重复值:
我遇到这个错误,因为我在我的PHP API部分写错了数据库名称 ……
因此,当您从数据库库中提取数据库时,也会发生此错误,而数据库库的名称由您写入的不正确。