我正在定义一个自定义过滤器,如下所示:
<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
解决方案实际上在这里描述: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)
我在我的项目中遇到了一个问题,我使用 $index 的 ng-repeat 跟踪,但是当数据来自数据库时,产品没有得到反映。我的代码如下:
<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] 不允许在转发器中重复。使用“track by”表达式指定唯一键。中继器
所以最后我通过制作 ng-repeat 的动态唯一键来解决这个问题,如下所示:
<div ng-repeat="product in productList.productList track by (product.id + $index)">
<product info="product"></product>
</div>
这解决了我的问题,希望这对您将来有所帮助。
track by $index
肯定会比 track by (product.id + $index)
更好吗?一方面,track by $index
更简单,另一方面,您实际上可能无法保证 (product.id + $index)
的值是唯一的。例如,如果您的数组以 id
为 5 的产品开头,然后有一个 id
为 4 的产品,则它们的 (product.id + $index)
值都将为 5(第一个产品为 5+0,4+ 1 为第二个),你会仍然得到 Duplicates in a repeater are not allowed 错误。
你打算你的“范围”过滤器做什么?
以下是我认为您正在尝试做的工作示例: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'
]
}
];
}
如果在使用 SharePoint 2010 时偶然发生此错误:重命名您的 .json 文件扩展名并确保更新您的 restService 路径。不需要额外的“按 $index 跟踪”。
幸运的是,我将此 link 转发给了这个理由:
.json 成为 SP2010 中重要的文件类型。 SP2010 包括某些 Web 服务端点。这些文件的位置是 14hive\isapi 文件夹。这些文件的扩展名为 .json。这就是它给出这样一个错误的原因。 “只关心 json 文件的内容是 json - 而不是它的文件扩展名”
一旦文件扩展名被更改,应该全部设置。
以防万一这发生在其他人身上,我在这里记录这个,我收到这个错误是因为我错误地将 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>
我检查了数组并且没有任何重复,只需仔细检查您的变量。
不允许在转发器中重复。使用“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 部分写了错误的数据库名称......
因此,当您从数据库中获取数据时,也可能会发生此错误,其名称您写的不正确。
我的 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"
来显示它。
<div ng-repeat="row in [1,1,1,2,2] |filter: 2 track by $index" >
“搜索过滤器”需要在“track by $index”之前track by $index
有一些 big pitfalls。