Question

我正在努力建立一个角度和代码的电子商务商店

var shopApp = angular.module('shopApp', ["slugifier"], function() {});

   controllers.productController = function($scope,FetchFactory) {

     $scope.fetchProducts = function(offset) {
        FetchFactory.items.fetchItems(offset).then(function(data){
        $scope.products = data;
    });
  }
  var activeAttrValue = 0;
  var activeAttrUnit = 0;
  var activeAttrId = 0;
   $scope.add_to_cart() = function(index){
        var newProd = [];
        newProd = $scope.products[index]; // $scope.products have products json
        newProd.quantity = 1;
        newProd.attr_id = activeAttrId;
        newProd.attr_value = activeAttrValue;
        newProd.attr_unit = activeAttrUnit;
        $scope.cartProducts.itemlist.push(newProd);
        $scope.cartProducts.total_items++;
        $scope.cartProducts.total_price += parseInt(newProd.price);
   }
 }
 shopApp.controller(controllers);

我有一个工厂，它会在ajax请求之后返回我的产品json并使用ng-repeat作为“产品中的产品”我在我的html中显示所有产品并且我已经制作了购物车所在的产品添加到购物车中的是通过ng-repeat显示“cartProduct in cartProducts.itemlist track by $ index” 产品具有颜色，大小，重量等属性，无论何时单击属性，其值（如重量）和单位（kg）都存储在全局变量activeAttrValue，activeAttrUnit中，如果单击添加到购物车，则它们存储在cartProducts中。 / p>

问题：如果有多个属性。当选择一个属性添加到购物车，并再次选择相同产品的另一个属性并添加到购物车。最后他们应该添加到购物车作为两个产品，但相反，最后添加的产品和属性只添加和在控制台中给出错误

 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.16/ngRepeat/dupes?p0=cartProduct%20in%20cartProducts.itemlist&p1=object%3A006

当我尝试console.log（$ scope.cartProducts.itemlist）; 我得到了这个

 Object
   $$hashKey: "005"
   attr_id: "3"
   attr_unit: ""
   attr_value: "blue"
  , 
  Object
   $$hashKey: "005"
   attr_id: "3"
   attr_unit: ""
   attr_value: "blue"

两种产品的属性都改为相同

我希望我对自己的问题很清楚。

Answer 1

默认的Angular不允许ng-repeat上的重复元素。为了解决这个问题，您需要在ng-repeat指令中添加“track by”。

例如，对于具有重复元素的数字列表：

<div ng-repeat="value in [1, 1, 1, 2, 2] track by $index"></div>

有关详细信息，请查看url of your error

Answer 2

尝试ng-repeat="cartProduct in cartProducts.itemlist track by $index"。

在角度js中使用推动功能

2 个答案: