Как заставить корзину AngularJs работать так, как задумано

Question

У меня есть простое приложение для покупок 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> 

Вот мой 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
        }
        ]
    } 
    ];

})();

Я пытался динамически добавлять идентификаторы продуктов в $ scope.cart, но этоне помогает

Answer 1

Первая проблема, которую я вижу, когда вы добавляете id в эту строку: $ scope.categories.forEach (function (d, i) {d.id = i + 1;});это добавление идентификатора на уровне категории, а не в массиве продуктов внутри него.ProductsData - это массив массивов.Внутренний массив содержит товары, которые покупатели добавят в корзину, и у него должны быть идентификаторы.Не на уровне внешнего массива.

Таким образом, логика назначения идентификаторов для продуктов должна измениться.В противном случае код JS, основанный на идентификаторах, потерпит неудачу.