“在一个中继器不允许重复。通过跟踪指数$不工作 [英] 'Duplicates in a repeater are not allowed. track by $index not working
本文介绍了“在一个中继器不允许重复。通过跟踪指数$不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我和angularjs STIL新。我得到了这个问题。我发现它在几个问题，但因为我用的轨道由$指数与我mentionned，但没有工作，谁能帮我没有人对我有益的，请
HTML
＆LT;表＆gt;
＆LT;＆TBODY GT;
＆LT; TR类=主标题＆GT;
＆LT;第i个图像和LT; /第i
百分位类=长期TXT＆GT;产品说明＆LT; /第i
＆LT;第iNÚMERO去意甲＆LT; /第i
＆LT;第i价格与LT; /第i
百分位个总＆LT; /第i
＆LT; / TR＆GT;
＆LT; TR类=蛋糕底的数据-NG-重复=产品在chosenPdtByQte轨道由$指数＆GT;
＆LT; TD类=蛋糕＆GT;
＆LT; DIV CLASS =产品IMG2＆GT;＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; TD类=蛋糕文本＆GT;
＆LT; DIV CLASS =产品文本＆GT;
＆LT; H3＆GT; {{product.nameProduct}}＆LT; / H3 GT＆;
＆LT; P＆GT;产品code：{{product.numserie}}＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; TD NG-的init =fetchNumSerie（product.id）＆GT;
＆LT;选择名称=singleSelectNG模型=selecteOperationNG选项=PDT作为pdt.id在numSeries PDT＆GT;
＆LT; /选择＆GT; ＆LT; / TD＆GT; ＆所述; TD＆GT;
＆LT; H4＆GT; {{product.price}}＆LT; / H4＆GT;
＆LT; / TD＆GT; ＆LT; TD类=顶 - 删除＆GT;
＆LT; H4＆GT; {{product.price * quantite [product.id]}}＆LT; / H4＆GT;
＆LT; DIV CLASS =近距离BTM＆GT;
＆LT;＆H5 GT;删除＆LT; / H5＆GT;
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
和这里是我的控制器我在哪里我的缩绒名单
为（VAR I = 0; I＆LT; $ scope.chosenProducts.length;我++）
{
的console.log（LLLLL+ $ scope.chosenProducts [I] .quantite ++ $ scope.quantite [$ scope.chosenProducts [I] .ID]）;
对于（VAR J = 0; J＆LT; $ scope.quantite [$ scope.chosenProducts [I] .ID]; J ++）
{ $ scope.chosenPdtByQte.push（$ scope.chosenProducts [I]）; }
}
解决方案
我真的不知道为什么你使用的方式，并尝试在它应用NG重复创建的列表，但我想下面的code做工精细没有重复的问题
\r
\r\r
\r angular.module（对myApp，[]）\r
.controller（myCtrl功能（$范围）{\r
$ scope.chosenProducts = [{\r
标识：1，\r
nameProduct：种皮，\r
numserie：XX-FF-GG-SS\r
价格：20\r
}，{\r
ID：2，\r
nameProduct：TESTB，\r
numserie：YY-EE-GG-SS\r
价格：30\r
}，{\r
ID：3，\r
nameProduct：TESTC，\r
numserie：XX-SS-GG-SS\r
价格：40\r
}，{\r
ID：4，\r
nameProduct：testD，\r
numserie：XX-FF-FF-SS\r
价格：50\r
}，{\r
ID：5，\r
nameProduct：睾丸，\r
numserie：XX-FF-11-SS\r
价格：60\r
}，{\r
ID：6，\r
nameProduct：testF，\r
numserie：XX-FF-DD-SS\r
价格：70\r
}];\r
\r
$ scope.quantite = [\r
4，5，6，7，8，9\r
];\r
\r
$ scope.chosenPdtByQte = [];\r
\r
对于（VAR I = 0; I＆LT; $ scope.chosenProducts.length;我++）{\r
对于（VAR J = 0; J＆LT; $ scope.quantite [$ scope.chosenProducts [I] .ID]; J ++）{\r
$ scope.chosenPdtByQte.push（$ scope.chosenProducts [I]）;\r
}\r
}\r
的console.log（$ scope.chosenPdtByQte）;\r
}）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆LT; DIV NG-应用=对myAppNG控制器=myCtrl＆GT;\r
＆LT;表＆gt;\r
＆LT;＆TBODY GT;\r
＆LT; TR类=主标题＆GT;\r
＆LT;第i个图像和LT; /第i\r
百分位类=长期TXT＆GT;产品说明＆LT; /第i\r
＆LT;第iNÚMERO去意甲＆LT; /第i\r
＆LT;第i价格与LT; /第i\r
百分位个总＆LT; /第i\r
＆LT; / TR＆GT;\r
＆LT; TR类=蛋糕底的数据-NG-重复=产品在chosenPdtByQte轨道由$指数＆GT;\r
＆LT; TD类=蛋糕＆GT;\r
＆LT; DIV CLASS =产品IMG2＆GT;＆LT; / DIV＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD类=蛋糕文本＆GT;\r
＆LT; DIV CLASS =产品文本＆GT;\r
＆LT; H3＆GT; {{product.nameProduct}}＆LT; / H3 GT＆;\r
＆LT; P＆GT;产品code：{{product.numserie}}＆LT; / P＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD NG-的init =fetchNumSerie（product.id）＆GT;\r
＆LT;选择名称=singleSelectNG模型=selecteOperationNG选项=PDT作为pdt.id在numSeries PDT＆GT;\r
＆LT; /选择＆GT;\r
＆LT; / TD＆GT;\r
\r
＆所述; TD＆GT;\r
＆LT; H4＆GT; {{product.price}}＆LT; / H4＆GT;\r
＆LT; / TD＆GT;\r
\r
＆LT; TD类=顶 - 删除＆GT;\r
＆LT; H4＆GT; {{product.price * quantite [product.id]}}＆LT; / H4＆GT;\r
＆LT; DIV CLASS =近距离BTM＆GT;\r
＆LT;＆H5 GT;删除＆LT; / H5＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
＆LT; /表＆gt;\r
＆LT; / DIV＆GT; \r
I'm stil new with angularjs. I got this problem. I have found it in several questions but no one was beneficial for me because I used track by $index as mentionned but didnt work with me Can anyone help me please
html:
<table>
<tbody>
<tr class="main-heading">
<th>Images</th>
<th class="long-txt">Product Description</th>
<th>Numero de serie</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr class="cake-bottom" data-ng-repeat="product in chosenPdtByQte track by $index">
<td class="cakes">
<div class="product-img2"></div>
</td>
<td class="cake-text">
<div class="product-text">
<h3>{{product.nameProduct}}</h3>
<p>Product Code: {{product.numserie}}</p>
</div>
</td>
<td ng-init="fetchNumSerie(product.id)">
<select name="singleSelect" ng-model="selecteOperation" ng-options="pdt as pdt.id for pdt in numSeries" >
</select>
</td>
<td>
<h4>{{product.price}}</h4>
</td>
<td class="top-remove">
<h4>{{product.price*quantite[product.id]}}</h4>
<div class="close-btm">
<h5>Remove</h5>
</div>
</td>
</tr>
</tbody>
</table>
And here is my controller where I am fulling my list
for (var i =0; i< $scope.chosenProducts.length; i++)
{
console.log(" lllll "+$scope.chosenProducts[i].quantite +" "+$scope.quantite[$scope.chosenProducts[i].id]);
for (var j=0; j<$scope.quantite[$scope.chosenProducts[i].id]; j++)
{
$scope.chosenPdtByQte.push($scope.chosenProducts[i]);
}
}
解决方案
I don't really know why you created a list using that way and try to apply ng-repeat on it, but I guess the following code is working fine without duplicates problem
angular.module("myApp", [])
.controller("myCtrl", function($scope) {
$scope.chosenProducts = [{
"id": 1,
"nameProduct": "testA",
"numserie": "xx-ff-gg-ss",
"price": 20
}, {
"id": 2,
"nameProduct": "testB",
"numserie": "yy-ee-gg-ss",
"price": 30
}, {
"id": 3,
"nameProduct": "testC",
"numserie": "xx-ss-gg-ss",
"price": 40
}, {
"id": 4,
"nameProduct": "testD",
"numserie": "xx-ff-ff-ss",
"price": 50
}, {
"id": 5,
"nameProduct": "testE",
"numserie": "xx-ff-11-ss",
"price": 60
}, {
"id": 6,
"nameProduct": "testF",
"numserie": "xx-ff-dd-ss",
"price": 70
}];
$scope.quantite = [
4, 5, 6, 7, 8, 9
];
$scope.chosenPdtByQte = [];
for (var i = 0; i < $scope.chosenProducts.length; i++) {
for (var j = 0; j < $scope.quantite[$scope.chosenProducts[i].id]; j++) {
$scope.chosenPdtByQte.push($scope.chosenProducts[i]);
}
}
console.log($scope.chosenPdtByQte);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tbody>
<tr class="main-heading">
<th>Images</th>
<th class="long-txt">Product Description</th>
<th>Numero de serie</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr class="cake-bottom" data-ng-repeat="product in chosenPdtByQte track by $index">
<td class="cakes">
<div class="product-img2"></div>
</td>
<td class="cake-text">
<div class="product-text">
<h3>{{product.nameProduct}}</h3>
<p>Product Code: {{product.numserie}}</p>
</div>
</td>
<td ng-init="fetchNumSerie(product.id)">
<select name="singleSelect" ng-model="selecteOperation" ng-options="pdt as pdt.id for pdt in numSeries">
</select>
</td>
<td>
<h4>{{product.price}}</h4>
</td>
<td class="top-remove">
<h4>{{product.price*quantite[product.id]}}</h4>
<div class="close-btm">
<h5>Remove</h5>
</div>
</td>
</tr>
</tbody>
</table>
</div>
这篇关于“在一个中继器不允许重复。通过跟踪指数$不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
