Question

我是angularjs的新手。我正在尝试创建一个shoppinng购物车应用程序。到目前为止，它进展顺利。但是，我需要添加＆＃39; Quantity＆＃39;字段到＆＃39;添加商品到商店＆＃39;部分。该数量应反映为给定项目的许多单位的下拉数。

用户应该能够每次都选择数量，金额应该是商品的价格*商品数量+总商品数量。我能做到吗？

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <h1>Select item(s) and add to cart:</h1>
    <div ng-repeat="item in items">
        <label>
            <input type="checkbox" ng-model="item.isSelected" />
            <span>{{item.name}}</span>
            <span>{{item.price}}</span>
        </label>
    </div>
    <hr>
    <p>Add items to shop</p>
    Enter name: <input type="text" ng-model="newItemname" />
    Enter price: <input type="text" ng-model="newItemprice" />
    <button ng-click="addtoshop()">Add to shop</button>
    <hr>
    <h1>Add items to shopping cart</h1>
    <button ng-click="addtocart((items | filter : { isSelected:true }))">Shop!</button>
    <hr>
    <p ng-model="amount">{{amount}}</p>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.items = [
            { name: "Bread", price: 20, isSelected: false },
            { name: "Butter", price: 25, isSelected: false },
            { name: "Jam", price: 30, isSelected: false },
            ];
            $scope.addtoshop = function () {
                var newitem = {};
                newitem.name = $scope.newItemname;
                newitem.price = $scope.newItemprice;
                newitem.qty = $scope.newItemqty;
            }
            $scope.addtocart = function (index) {
                alert("You chose " + index.length + " items.");
                var p = 0, i;
                for (i = 0; i < index.length; i++) {
                    p += parseInt(index[i].price);
                }
                alert("Shopping price: " + p);
                $scope.amount = p;
            };
        });
    </script>
</body>
</html>

Answer 1

尽管您的代码需要进行一些重构（例如addtocart函数实际上并没有添加任何内容，但它只重新计算已添加的项目），您可以通过添加quantity属性来实现所需的功能每个项目和range过滤器将处理具有1-100值的选择框（或者您需要的最小值/最大值）。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <h1>Select item(s) and add to cart:</h1>
    <div ng-repeat="item in items">
        <label>
            <input type="checkbox" ng-model="item.isSelected" />
            <span>{{item.name}}</span>
            <span>{{item.price}}</span>
        </label>

        Select Quantity: 
        <select ng-model="item.quantity" ng-option="num in [] | range: 1 : 100"></select>
    </div>
    <hr>
    <p>Add items to shop</p>
    Enter name: <input type="text" ng-model="newItemname" />
    Enter price: <input type="text" ng-model="newItemprice" />
    <button ng-click="addtoshop()">Add to shop</button>
    <hr>
    <h1>Add items to shopping cart</h1>
    <button ng-click="addtocart((items | filter : { isSelected:true }))">Shop!</button>
    <hr>
    <p ng-model="amount">{{amount}}</p>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myCtrl', function ($scope) {
            $scope.items = [
                { name: "Bread", price: 20, isSelected: false, quantity: 1 },
                { name: "Butter", price: 25, isSelected: false, quantity: 1 },
                { name: "Jam", price: 30, isSelected: false, quantity: 1 },
            ];

            $scope.addtoshop = function () {
                var newitem = {};
                newitem.name = $scope.newItemname;
                newitem.price = $scope.newItemprice;
                newitem.qty = $scope.newItemqty;
                newitem.qty = 1;
            };

            $scope.addtocart = function (index) {
                alert("You chose " + index.length + " items.");
                var p = 0, i;
                for (i = 0; i < index.length; i++) {
                    p += parseInt(index[i].price * index[i].quantity);
                }
                alert("Shopping price: " + p);
                $scope.amount = p;
            };
        });

        app.filter('range', function () {
            return function(input, start, end) {
                start = parseInt(start);
                end = parseInt(end);

                for (var i=start; i<=end; i++) {
                input.push(i);
            }

            return input;
            };
        })
    </script>
</body>
</html>

Angularjs：自定义数组大小/数组大小作为可自定义的下拉列表

1 个答案: