Html 我想为用户提供一个选择购物车产品数量的选项？

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

看

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

如果有人建议在代码中添加更高效的代码，这对用户来说是很容易的，并且是一种良好的结构化方式，这真的会很有帮助吗

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;
};

  }
]);

var-app=angular.module（“myApp”、“ngRoute”）；
应用控制器（'mobileController'，函数（$scope）{
$scope.items=[{
名称：“Iphone”，
价格：70000，
评级：'******'，
图像：'http://i.imgur.com/hfMaGTN.png'
}, {
名称：“Oneplus”，
价格：60000，
评级：'***'，
图像：'http://i.imgur.com/sBcs5ZE.jpg'
}, {
名称:"三星",，
价格：50000，
评级：'***'，
图像：'http://i.imgur.com/8Bexxbf.jpg'
}, {
名称:"索尼",，
价格：40000，
评级：'***'，
图像：'http://i.imgur.com/0c7PcX8.png'
}, {
名称：“Moto”，
价格：20000，
评级：'***'，
图像：'http://i.imgur.com/HyWR1VE.png'
}];
});
app.service（“cartService”，[function（）{
var-cart=[]；
函数getCart（）{
控制台日志（购物车）；
返回车；
}
函数addToCart（项目）{
推车推（物品）；
控制台日志（购物车）；
}
返回{
getCart:getCart，
addToCart:addToCart
};
}]);
app.config（函数（$routeProvider）{
$routeProvider
.when（“/store”{
templateUrl:“store.html”，
})
.when（“/item/：itemName”{
templateUrl:'details.html'，
控制器：“ItemCtrl”
})
.when（“/cart”{
templateUrl:'cartdetails.html'，
控制器：“cartCtrl”
})
.when（“/checkout”{
templateUrl:'checkout.html'，
控制器：“cartCtrl”
});
});
app.controller（'ItemCtrl'、['$scope'、'$routeParams'、'cartService'，
功能（$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=功能（项目）{
控制台日志（项目）；
cartService.addToCart（项目）；
警报（item.itemName+“已成功添加”）；
};
}
]);
app.controller（'cartCtrl'，['$scope'，'cartService'，
功能（$scope，cartService）{
$scope.name=“saisree”；
$scope.cartItems=cartService.getCart（）；
$scope.getTotal=function（）{
var合计=0；
对于（变量i=0；i<$scope.cartItems.length；i++）{
var item=$scope.cartItems[i]；
合计+=项目。项目价格；
}
返回总数；
};
}
]);

我实现了一个小部分，只是为了让您从正确的方向开始：

ideea是将您可以拥有的产品数量和您在购物车中拥有的产品数量存储在服务中。当用户尝试添加新产品时，您只需验证产品数量是否超过购物车容量即可。

---

如果您有任何问题，请随时提问。

我实施了一个小部分，只是为了让您从正确的方向开始：

ideea是将您可以拥有的产品数量和您在购物车中拥有的产品数量存储在服务中。当用户尝试添加新产品时，您只需验证产品数量是否超过购物车容量即可。

---

如果您有任何问题，请随时提问。

hi了解您的逻辑，但是否有一种方法让用户给出产品的数量，并应反映在cartdetails页面中，我的意思是，如果他可以将2作为iPhone数量，则在cart details页面中应添加2个产品？hi了解您的逻辑，但是有没有一种方法可以让用户给出产品的数量，并且应该反映在cartdetails页面中，我的意思是，如果他可以将2作为iPhone的数量，那么在cart details页面中应该添加2个产品？

var maxNumberOfProducts = 10;
var currentNumberOfProducts = 0;