Javascript 如何让AngularJs购物车按预期工作

我有一个简单的购物AngularJs应用程序。它按预期显示产品列表。您可以将产品添加到购物车，它会在购物车中显示产品名称和价格，并更新总价。但是，如果添加第二个产品，它不会显示第二个产品的名称。它只是将以前添加的产品价格添加到总价格中，而不是新产品价格。因此，它不会重复您推入$scope.cart的产品

这是我的HTML：

 <div class="row">
   <div class="col-sm-8" ng-repeat="category in categories">
     <h2>{{category.categoryName}}</h2>
     <div ng-repeat="product in category.products track by $index">
       <div class="panel">
         <img ng-src="{{product.image}}">
         <h6>{{product.name}}</h6>
         <p>{{product.price}}</p>
         <button class="btn btn-sm" ng-click="addItemToCart(product)">Add to Cart</button> 
       </div>
     </div> 
   </div>
   <div class="col-sm-4">
     <ul class="list-group" ng-repeat="products in cart">
       <li class="list-group-item">
         {{products.name}} |{{products.count}}| {{products.price*products.count}} 
         <input class="btn btn-sm btn-danger" type="button" ng-click="removeItemCart(products)" value="Remove" />               
       </li>
       <h5>Number of items in cart: {{productsNumber}}</h5>
     </ul>
     <h4>Total: R{{total}}.</h4>
     <button class="btn btn-sm btn-success">Checkout</button>
   </div>
 </div>
</div> 

{{category.categoryName}
{{product.name}
{{product.price}}

添加到购物车


{{products.name}}{{products.count}}{{products.price*products.count}}

购物车中的项目数：{{productsNumber}

总数：R{{Total}。
结账

这是我的AngularJs：

(function(){

    var app = angular.module('myApp', ['ngCookies']);

    app.controller('productsCtrl', ['$scope','$cookies', function($scope,$cookies){

        $scope.categories = productsData;
        // Add ids to the array objects //
        $scope.categories.forEach( function(d, i){ d.id = i+1; });
        $scope.cart = [];
        $scope.total = 0;
        $scope.productsNumber = $scope.cart.length;

        if (!angular.isUndefined($cookies.get('cart'))) {
            $scope.cart =  $cookies.getObject('cart');
        }

        $scope.addItemToCart = function(product){

            if ($scope.cart.length === 0){
                product.count = 1;
                $scope.cart.push(product);
            } else {
                var repeat = false;
                for(var i = 0; i< $scope.cart.length; i++){
                    if($scope.cart[i].id === product.id){
                        repeat = true;
                        $scope.cart[i].count +=1;
                    }
                }
                if (!repeat) {
                    product.count = 1;
                    $scope.cart.push(product);  
                }
            }
            var expireDate = new Date();
            expireDate.setDate(expireDate.getDate() + 1);
            $cookies.putObject('cart', $scope.cart,  {'expires': expireDate});
            $scope.cart = $cookies.getObject('cart');

            $scope.total += parseFloat(product.price);
            $cookies.put('total', $scope.total,  {'expires': expireDate});
        };

        $scope.removeItemCart = function(product){

            if(product.count > 1){
                product.count -= 1;
                var expireDate = new Date();
                expireDate.setDate(expireDate.getDate() + 1);
                $cookies.putObject('cart', $scope.cart, {'expires': expireDate});
                $scope.cart = $cookies.getObject('cart');
            }
            else if(product.count === 1){
                var index = $scope.cart.indexOf(product);
                $scope.cart.splice(index);
                expireDate = new Date();
                expireDate.setDate(expireDate.getDate() + 1);
                $cookies.putObject('cart', $scope.cart, {'expires': expireDate});
                $scope.cart = $cookies.getObject('cart');

            }

            $scope.total -= parseFloat(product.price);
            $cookies.put('total', $scope.total,  {'expires': expireDate});

        };

    }]);

    var productsData = [
    {
        categoryName: "Gas Cylinders",
        products: [
        {
            name: "15kg Gas Cylinder",
            image: "images/gas4.jpg",
            price: 50
        },
        {
            name: "DEFY 4 Burner Gas Stove",
            image: "images/stove2.jpg",
            price: 90
        }
        ]
    }, 
    {
        categoryName: "Electronics",
        products: [
        {
            name: "Samsung Galaxy J4 Core",
            image: "images/j4-core.jpg",
            price: 100
        },
        {
            name: "40'' FHD Hisense TV",
            image: "images/tv2.jpg",
            price: 200
        }
        ]
    } 
    ];

})();

（函数（）{
var app=angular.module（'myApp'，['ngCookies']）；
app.controller（'productsCtrl'，['$scope'，'$cookies'，函数（$scope，$cookies）{
$scope.categories=产品数据；
//向数组对象添加ID//
$scope.categories.forEach（函数（d，i）{d.id=i+1；}）；
$scope.cart=[]；
$scope.total=0；
$scope.productsNumber=$scope.cart.length；
如果（！angular.isUndefined（$cookies.get（'cart'）））{
$scope.cart=$cookies.getObject（'cart'）；
}
$scope.addItemToCart=功能（产品）{
如果（$scope.cart.length==0）{
product.count=1；
$scope.cart.push（产品）；
}否则{
var repeat=false；
对于（变量i=0；i<$scope.cart.length；i++）{
if（$scope.cart[i].id==product.id）{
重复=正确；
$scope.cart[i]。计数+=1；
}
}
如果（！重复）{
product.count=1；
$scope.cart.push（产品）；
}
}
var expireDate=新日期（）；
expireDate.setDate（expireDate.getDate（）+1）；
$cookies.putObject（'cart'，$scope.cart，{'expires'：expireDate}）；
$scope.cart=$cookies.getObject（'cart'）；
$scope.total+=parseFloat（产品价格）；
$cookies.put（'total'，$scope.total，{'expires'：expireDate}）；
};
$scope.removitemcart=功能（产品）{
如果（product.count>1）{
product.count-=1；
var expireDate=新日期（）；
expireDate.setDate（expireDate.getDate（）+1）；
$cookies.putObject（'cart'，$scope.cart，{'expires'：expireDate}）；
$scope.cart=$cookies.getObject（'cart'）；
}
else if（product.count==1）{
var索引=$scope.cart.indexOf（产品）；
$scope.cart.splice（索引）；
expireDate=新日期（）；
expireDate.setDate（expireDate.getDate（）+1）；
$cookies.putObject（'cart'，$scope.cart，{'expires'：expireDate}）；
$scope.cart=$cookies.getObject（'cart'）；
}
$scope.total-=parseFloat（产品价格）；
$cookies.put（'total'，$scope.total，{'expires'：expireDate}）；
};
}]);
var productsData=[
{
类别名称：“气瓶”，
产品：[
{
名称：“15kg气瓶”，
图片：“images/gas4.jpg”，
价格:50
},
{
名称：“DEFY 4燃烧器燃气炉”，
图片：“images/stove2.jpg”，
价格:90
}
]
}, 
{
类别名称：“电子”，
产品：[
{
名称：“三星Galaxy J4核心”，
图片：“images/j4 core.jpg”，
价格:100
},
{
名称：“40寸FHD海信电视”，
图片：“images/tv2.jpg”，
售价：200
}
]
} 
];
})();

---

我尝试将产品ID动态添加到$scope.cart，但没有帮助

我看到的第一个问题是，当您在此行中添加id时：$scope.categories.forEach（function（d，I）{d.id=I+1；}）；它是在类别级别添加id，而不是在其内部的产品数组中添加id。productsData是数组的数组。内部阵列具有客户将添加到购物车的产品，并且应该具有ID。不在外部数组级别

---

因此，为产品分配ID的逻辑应该改变。否则，基于id的JS代码将失败。

我看到的第一个问题是，当您在此行中添加id时：$scope.categories.forEach（function（d，I）{d.id=I+1；}）；它是在类别级别添加id，而不是在其内部的产品数组中添加id。productsData是数组的数组。内部阵列具有客户将添加到购物车的产品，并且应该具有ID。不在外阵级。非常感谢，老兄。它解决了这个问题。