本文翻译自:Angular ng-repeat Error “Duplicates in a repeater are not allowed.”
I am defining a custom filter like so: 我正在定义一个自定义过滤器,如下所示:
<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>
As you can see the ng-repeat where the filter is being used is nested within another ng-repeat 如您所见,使用过滤器的ng-repeat嵌套在另一个ng-repeat中
The filter is defined like this: 过滤器的定义如下:
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;
};
});
I'm getting: 我越来越:
Error: Duplicates in a repeater are not allowed. 错误:不允许在转发器中重复。 Repeater: comment in item.comments | 中继器:在item.comments中发表评论| range:1:2 ngRepeatAction@ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an 范围:1:2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an
#1楼
参考:https://stackoom.com/question/16NVW/Angular-ng-repeat错误-不允许在转发器中重复
#2楼
What do you intend your "range" filter to do? 您打算如何使用“范围”过滤器?
Here's a working sample of what I think you're trying to do: http://jsfiddle.net/evictor/hz4Ep/ 这是我认为您要尝试执行的工作示例: http : //jsfiddle.net/evictor/hz4Ep/
HTML: 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: 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'
]
}
];
}
#3楼
The solution is actually described here: http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/ 该解决方案实际上在这里进行了描述: http : //www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/
AngularJS does not allow duplicates in a ng-repeat directive. AngularJS不允许在ng-repeat指令中重复。 This means if you are trying to do the following, you will get an error. 这意味着,如果您尝试执行以下操作,将会收到错误消息。
// 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]">
However, changing the above code slightly to define an index to determine uniqueness as below will get it working again. 但是,稍微更改上面的代码以定义一个索引来确定唯一性,如下所示,它将使它再次工作。
// This will work
<div ng-repeat="row in [1,1,1] track by $index">
Official docs are here: https://docs.angularjs.org/error/ngRepeat/dupes 官方文档在这里: https : //docs.angularjs.org/error/ngRepeat/dupes
#4楼
对于那些希望使用JSON并仍然遇到相同错误的人,请确保您解析数据:
$scope.customers = JSON.parse(data)
#5楼
If by chance this error happens when working with SharePoint 2010: Rename your .json file extensions and be sure to update your restService path. 如果偶然在使用SharePoint 2010时发生此错误,请执行以下操作:重命名.json文件扩展名,并确保更新restService路径。 No additional "track by $index" was required. 不需要其他“ $ index跟踪”。
Luckily I was forwarded this link to this rationale: 幸运的是,我将此链接转发给了以下理由:
.json becomes an important file type in SP2010. .json成为SP2010中重要的文件类型。 SP2010 includes certains webservice endpoints. SP2010包括某些Web服务终结点。 The location of these files is 14hive\\isapi folder. 这些文件的位置是14hive \\ isapi文件夹。 The extension of these files are .json. 这些文件的扩展名是.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" “只关心json文件的内容是json-而不是文件扩展名”
Once the file extensions are changed, should be all set. 更改文件扩展名后,应全部设置。
#6楼
My JSON
response was like this: 我的JSON
响应是这样的:
{"items":
[
{
"index": 1,
"name": "Samantha",
"rarity": "Scarborough",
"email": "maureen@sykes.mk"
},
{
"index": 2,
"name": "Amanda",
"rarity": "Vick",
"email": "jessica@livingston.mv"
}]
}
So, I used ng-repeat = "item in variables.items"
to display it. 因此,我使用了ng-repeat = "item in variables.items"
来显示它。