カートの商品数量を角度で選択するオプションをユーザに提供したいですか？

Question

私は商品のリストを持っている私のシンプルなショッピングカートです。各アイテムをクリックすると、詳細が表示され、カートに商品を追加する詳細ページのカートボタンに追加しました。

がplunker with example

を参照してくださいしかし、私は、製品の数量を選択するオプションをユーザーに提供したい、ユーザーが数量を増減することができますか？また、カート内のアイテムの数に制限があるはずです！誰も私がこれを実装する方法を提案することはできますか？

誰かが、コードに追加する効率を、ユーザーにとって使いやすく、構造化された方法で提案すると本当に役に立ちますか？

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サービスあなたが持つことができる製品の数と数で格納することですあなたがカートに入れた製品のユーザーが新しい製品を追加しようとすると、製品数がカートの容量を超えていないかどうかを確認するだけです。 ご不明な点がございましたら、お気軽にお問い合わせください。