<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嵌套在另一个ng-repeat
过滤器的定义如下:
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
#1 楼
该解决方案实际上在这里描述: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
#2 楼
对于那些希望使用JSON并仍然遇到相同错误的人,请确保您解析了数据:$scope.customers = JSON.parse(data)
评论
这对我不起作用,我期望在使用$ http服务后使用json,但是SyntaxError:Object.parse(本地)的意外令牌o
– aurelius
15年3月18日在7:35
@Fergus很高兴这对您有用;但是,除非您已经知道,否则请确保查找JSON.parse和JSON.stringify之间的区别。
–usefulBee
2015年9月2日14:19在
疯。经过几个月的正确工作,Angular突然决定从$ http()返回的JSON不再是JSON。明确地解析它为我们解决了这个问题。感谢您的疯狂建议。
– Eric L.
15年11月13日在19:38
#3 楼
我在我的项目中遇到一个问题,当时我正在使用$ index的ng-repeat track,但是当数据来自数据库时,产品没有得到反映。我的代码如下:<div ng-repeat="product in productList.productList track by $index">
<product info="product"></product>
</div>
在上面的代码中,product是显示产品的单独指令。但是我知道,当我们从范围中传递数据时,$ index会引起问题。因此,数据丢失和DOM无法更新。
我通过使用product.id作为ng-repeat中的密钥来找到解决方案,如下所示:
<div ng-repeat="product in productList.productList track by product.id">
<product info="product"></product>
</div>
但是以上代码再次失败并当多个产品具有相同ID时,抛出以下错误:
angular.js:11706错误:[ngRepeat:dupes]不允许在转发器中重复。使用“跟踪依据”表达式指定唯一键。中继器
所以最后我通过制作ng-repeat的动态唯一密钥来解决了这个问题,如下所示:
<div ng-repeat="product in productList.productList track by (product.id + $index)">
<product info="product"></product>
</div>
这解决了我的问题,希望对以后有所帮助。
评论
当然,通过$ index进行跟踪比通过(product.id + $ index)进行跟踪更好吗?一方面,通过$ index进行跟踪更为简单,另一方面,您可能实际上无法保证(product.id + $ index)的值是唯一的。例如,如果您的数组以id为5的产品开头,然后有id为4的产品,则(product.id + $ index)的值都将为5(第一个产品的5 + 0为4) +1),您仍然会收到“不允许在转发器中重复”错误。
–马克·阿默里(Mark Amery)
16年5月15日在22:42
我同意$索引更简单,但是上述解决方案对我来说可以解决$ index所面临的所有问题。在我的情况下,product.id是字母数字,因此(product.id + $ index)在任何情况下都不能重复。因此,此解决方案的思想是,如果$ index在某种情况下引起任何问题,那么我们可以使用任何带有track的逻辑,通过该逻辑唯一地创建id。
– Mahima Agrawal
16年5月17日在5:32
#4 楼
您打算如何使用“范围”过滤器?以下是我认为您要尝试的工作示例: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'
]
}
];
}
#5 楼
如果偶然在使用SharePoint 2010时发生此错误,请执行以下操作:重命名.json文件扩展名,并确保更新restService路径。不需要其他“ $ index跟踪”。幸运的是,我已将此链接转发给了以下基本原理:
.json成为SP2010中重要的文件类型。 SP2010包括某些Web服务终结点。这些文件的位置是14hive \ isapi文件夹。这些文件的扩展名是.json。这就是它给出此类错误的原因。
“只关心json文件的内容是json-而不是文件扩展名”
文件扩展名已更改,应全部设置。
#6 楼
以防万一这发生在别人身上,我在这里记录了这个错误,因为我错误地将ng-model设置为与ng-repeat数组相同: <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>
我检查了数组,没有重复项,只需仔细检查变量即可。
#7 楼
不允许在转发器中重复。使用'track by'表达式指定唯一键。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>
评论
请声明您发布的任何链接的所有从属关系
–德拉肯
16-6-10下午5:36
#8 楼
如果在- 标记内调用ng-repeat,则可以允许重复。请参阅此链接以供参考。
请参阅Todo2.html
#9 楼
我的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"
进行显示。#10 楼
不允许在转发器中重复。使用“跟踪依据”表达式指定唯一键。中继器:mydt中的sdetail,重复键:string :,重复值:我遇到了此错误,因为我在php api部分中输入了错误的数据库名称。 br />
因此,当您从数据库库中提取名称不正确的数据库中的数据时,也会发生此错误。
评论
我想提到的是,您可以应用任何自定义跟踪属性来定义唯一性,而不仅仅是$ index。由于在这种情况下,对象没有任何其他属性,因此可以正常工作。发生此错误的原因是angular使用字典将项的id作为键存储,将值作为DOM参考存储。从代码(angular.js中的第15402行)看来,它们是根据其键来缓存先前找到的DOM元素,以进行性能优化。由于他们需要唯一的密钥,因此当他们在15417行上发现重复的密钥时,会显式抛出此错误
– devshorts
13年7月19日在21:01
–胡哲
14年2月14日在19:55
Yikes,Angular方面毫无意义的讨厌设计。在开发和测试过程中错过这个问题非常非常容易,因为您的阵列从不包含重复项,而只是让您的应用程序在首次暴露于重复状态时会在生产中爆炸。在不了解“禁止重复”限制之前,我已经构建了Angular应用。现在,我发现自己在回想,想知道是否在不知不觉中编写了损坏的代码。
–马克·阿默里(Mark Amery)
2015年3月3日13:49
由于这个原因,我们的应用程序爆炸了,我不是有角度的开发人员,$ index变量是否存在于某处?
–常昭
18年10月31日在8:00
请注意,如果稍后更新数组元素,则需要注意的是,它不会重新编译DOM标签,而是显示陈旧的数据。您可以使用track by($ index +':'+ row),以便它会在数据更新时以及添加新元素时更新单个
–棕褐色
19年1月7日在7:42