Angular ng-repeat错误"重复在一个中继器是不允许的。

我定义了一个自定义过滤器，如下所示:

<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;
};
});

我得到:

错误:在中继器中不允许重复。Repeater: comment in item.comments | range:1:2 ngRepeatAction@https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

340005 次浏览
小开

你想让你的“range”过滤器做什么?

这是我认为你正在尝试做的工作示例

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'
]
}
];
}
小开
最佳答案

解决方案实际上描述在这里: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但仍然得到相同错误的人，请确保你解析了数据:

$scope.customers = JSON.parse(data)
小开

如果在使用SharePoint 2010时偶然发生这个错误:重命名你的.json文件扩展名，并确保更新你的restService路径。不需要额外的“按$index跟踪”。

幸运的是，我将这个链接转发到这个基本原理:

.json在SP2010中成为一种重要的文件类型。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"来显示它。

小开

我在我的项目中遇到了一个问题，我使用ng-repeat track by $index，但当数据来自数据库时，产品没有得到反映。我的代码如下:

<div ng-repeat="product in productList.productList track by $index">
<product info="product"></product>
</div>

在上面的代码中，product是一个单独的显示产品的指令。但我开始知道，$index导致问题时，我们传递数据从范围。因此数据丢失和DOM无法更新。

我通过使用产品找到了解决方案。Id作为ng-repeat中的一个键，如下所示:

<div ng-repeat="product in productList.productList track by product.id">
<product info="product"></product>
</div>

但是当多个产品具有相同的id时，上面的代码再次失败并抛出下面的错误:

angular.js:11706 Error: [ngRepeat:dupes]在中继器中不允许重复。使用'track by'表达式指定唯一的键。中继器

所以最后我通过ng-repeat的动态唯一键来解决这个问题，如下所示:

<div ng-repeat="product in productList.productList track by (product.id + $index)">
<product info="product"></product>
</div>

这解决了我的问题，希望这对你将来有所帮助。

小开

中继器中不允许重复。使用'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>
小开

中继器中不允许重复。使用'track by'表达式指定唯一的键。重复器:mydt中的sdetail，重复键:字符串:，重复值:

我遇到这个错误，因为我在我的php api部分......中写了错误的数据库名称

因此，当您从数据库中获取数据时，这个错误也可能发生，因为您写错了数据库的名称。

小开

为了防止这种情况发生在其他人身上，我在这里记录了这一点，我得到这个错误是因为我错误地将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>

我检查了数组，没有任何重复，只是再次检查你的变量。

小开

如果你在<中调用ng-repeat;ul>标签，你可以允许复制。参考这个链接。 看到Todo2.html < / p >


提交答案