Question

我正在和Angular一起玩，我偶然发现了另一个问题。我试图从外部js文件中提取数据，我收到了'错误：ngRepeat：dupes'错误。

<div class="productRow" ng-repeat="prod in productsList">

因此，按照错误消息中提供的指示，我添加了“track by”

<div class="productRow" ng-repeat="prod in productsList track by $index">

我的数据出现了，但现在它只是多次重复一个项目。

请查看this link以获取完整代码。

我做错了吗？我的意思是我很明显，但我做错了什么？

谢谢！

Answer 1

Angular不是问题，它会显示您提供的数组。

在script.js中，如果你在生成后添加console.log($scope.productsList);，你就会明白我的意思。

你的问题在这一行

if (productItems[ii] == products[jj].id)

您没有重置thisProduct

在thisProduct = {};

下添加此内容

Answer 2

因为你的productsList包含相同的对象。

[{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3}]
{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3}]

Answer 3

请参阅此处http://plnkr.co/edit/bj0NWJnjgNUbHcFX1Wvw?p=preview

  for (var ii = 0; ii < productItems.length; ii++) {
                    for (var jj = 0; jj < products.length; jj++) {
                        if (productItems[ii] == products[jj].id) {
 //add this line to your code
                          thisProduct = {};
                            thisProduct.prodIdxId = products[jj].id;
                            thisProduct.skuId = products[jj].skuId;
                            thisProduct.title = products[jj].title;
                            thisProduct.size = products[jj].size;
                            thisProduct.price = products[jj].price;
                            thisProduct.discount_price = products[jj].disc_price;
                            thisProduct.discount_msg = products[jj].discount_msg;
                            thisProduct.ship_save = products[jj].ship_save;
                            thisProduct.free_shipping = products[jj].free_shipping;
                            thisProduct.weight = products[jj].weight;
                            thisProduct.rating = products[jj].rating;
                            thisProduct.img = products[jj].img;
                            thisProduct.out_of_stock = products[jj].oos;
                            thisProduct.qty = products[jj].qty;
                            console.log(thisProduct);

                            $scope.productsList.push(thisProduct);

                            console.log($scope.productsList);
                        }
                    }
                }

另一个AngularJS错误：ngRepeat：dupes

3 个答案: