Question

这是我的简单购物车，我有产品清单，当我点击每个项目时，我得到详细信息，我在详细信息页面中添加到购物车按钮，将产品添加到购物车，我还实现了删除购物车逻辑。

但我想为用户提供选择产品数量的选项，用户可以增加或减少数量？此外，购物车中的商品数量也应该有限制！有人可以建议我如何实现这一点吗？

如果有人建议将更多的效率添加到代码中，这对用户来说很容易并且结构良好，那将会非常有用吗？

var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
  $scope.items = [{
    name: 'Iphone',
    price: 70000,
    rating: '*****',
    image: 'http://i.imgur.com/hfMaGTN.png'
  }, {
    name: 'Oneplus',
    price: 60000,
    rating: '****',
    image: 'http://i.imgur.com/sBcs5ZE.jpg'
  }, {
    name: 'Samsung',
    price: 50000,
    rating: '***',
    image: 'http://i.imgur.com/8Bexxbf.jpg'
  }, {
    name: 'Sony',
    price: 40000,
    rating: '***',
    image: 'http://i.imgur.com/0c7PcX8.png'
  }, {
    name: 'Moto',
    price: 20000,
    rating: '****',
    image: 'http://i.imgur.com/HyWR1VE.png'
  }];
});

app.service("cartService", [function(){

  var cart = [];

  function getCart(){
    console.log(cart);
    return cart;
  }

  function addToCart(item){
    cart.push(item);
    console.log(cart);
  }

  return {
    getCart: getCart,
    addToCart: addToCart
  };

}]);

app.config(function($routeProvider) {
  $routeProvider

  .when("/store", {
       templateUrl : "store.html",
   })

 .when('/item/:itemName', {
      templateUrl: 'details.html',
      controller: 'ItemCtrl'
    })
    .when("/cart", {
      templateUrl: 'cartdetails.html',
      controller: 'cartCtrl'
    })
    .when("/checkout", {
      templateUrl: 'checkout.html',
      controller: 'cartCtrl'
    });


});

app.controller('ItemCtrl', ['$scope', '$routeParams', 'cartService',
  function($scope, $routeParams, cartService) {
    $scope.item = {};
    angular.forEach($scope.items, function(item) {
      if (item.name == $routeParams.itemName) {
        $scope.item.itemName = item.name;
        $scope.item.itemPrice = item.price;
        $scope.item.itemRating = item.rating;
        $scope.item.itemImage = item.image;
      }
    });

    $scope.addProduct = function(item){
      console.log(item);
      cartService.addToCart(item);
       alert(item.itemName+" added successfully") ;
    };

  }
]);
app.controller('cartCtrl', ['$scope','cartService',
  function($scope,cartService) {
    $scope.name="saisree";

    $scope.cartItems=cartService.getCart();

    $scope.getTotal = function(){
    var total = 0;
    for(var i = 0; i < $scope.cartItems.length; i++){
        var item = $scope.cartItems[i];
        total += item.itemPrice ;
    }
    return total;
};

  }
]);

Answer 1

我实施了一小部分，只是为了让你开始朝着正确的方向前进： https://plnkr.co/edit/SDO5BlNfI9okDuwe4jrl?p=preview

var maxNumberOfProducts = 10;
var currentNumberOfProducts = 0;

ideea用于在服务中存储您可以拥有的产品数量以及购物车中的产品数量。当用户尝试添加新产品时，您只需验证产品数量是否超过购物车容量。如果您有任何疑问，请随时提出。

我想为用户提供选择角度为购物车的产品数量的选项吗？

1 个答案: