Angular.js：如何为价格添加用户输入并保持小计

Question

all. 所有。 I'm trying to make a shopping list that has the array of food and next to each food item prompts user for price and quantity and then keeps a running subtotal of all items i have the basic down but really struggling with the "price box" quantity and subtotal. 我正在尝试制作一个包含食品阵列的购物清单，并且每个食品旁边都提示用户输入价格和数量，然后对所有商品进行分类汇总，我对此基本有所保留，但确实在“价格框”中苦苦挣扎数量和小计。

 var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; $scope.addItem = function() { $scope.errortext = ""; if (!$scope.addMe) { return; } if ($scope.products.indexOf($scope.addMe) == -1) { $scope.products.push($scope.addMe); } else { $scope.errortext = "The item is already in your shopping list."; } } $scope.removeItem = function(x) { $scope.errortext = ""; $scope.products.splice(x, 1); } });

 <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;"> <header class="w3-container w3-light-grey w3-padding-16"> <h3>My Shopping List</h3> </header> <ul class="w3-ul"> <li><input type="text" name="price" class="price" style="width: 50px" /></li> <li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li> </ul> <div class="w3-container w3-light-grey w3-padding-16"> <div class="w3-row w3-margin-top"> <div class="w3-col s10"> <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding"> </div> <div class="w3-col s2"> <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button> </div> </div> <p class="w3-text-red">{{errortext}}</p> </div> </div> </body> </html>

Answer 1

There is really better ways to structure the code, but bottom line you need to make your products array contain objects with all the properties you need (name, quantity and price), and when you add an item you just push a entire new object to the array, instead of just the name. 确实有更好的方法来组织代码，但最重要的是，您需要使产品数组包含具有所需所有属性（名称，数量和价格）的对象，并且在添加项目时，只需将整个新对象压入数组，而不仅仅是名称。 Having an object in your ng-repeat means that now you need to access the properties accordingly that you need to display in your view. 在ng-repeat中有一个对象意味着您现在需要相应地访问需要在视图中显示的属性。 Please see code snippet 请参阅代码段

 var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = [{ name: "Milk", quantity: 1, price: 2.00 }, { name: "Bread", quantity: 2, price: 4.00 }, { name: "Cheese", quantity: 3, price: 6.00 } ]; $scope.quantity = 1; $scope.getTotal = function() { var total = 0; for (var i = 0; i < $scope.products.length; i++) { total += $scope.products[i].quantity * $scope.products[i].price; } return total; } $scope.addItem = function() { $scope.errortext = ""; if (!$scope.addMe) { return; } if (true /*need a new way to check for duplicates */ ) { $scope.products.push({ name: $scope.addMe, quantity: $scope.quantity || 0, price: $scope.price || 0 }); } else { $scope.errortext = "The item is already in your shopping list."; } } $scope.removeItem = function(x) { $scope.errortext = ""; $scope.products.splice(x, 1); } });

 <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;"> <header class="w3-container w3-light-grey w3-padding-16"> <h3>My Shopping List</h3> </header> <ul class="w3-ul"> <li><input type="text" name="price" class="price" style="width: 50px" /></li> <li ng-repeat="x in products" class="w3-padding-16">{{x.name}} | <input style="width: 50px" type="number" ng-model="x.quantity" min="0"> | $ <input style="width: 50px" type="number" ng-model="x.price" min="0"> | Subtotal ${{x.quantity * x.price}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li> </ul> Total ${{getTotal()}} <div class="w3-container w3-light-grey w3-padding-16"> <div class="w3-row w3-margin-top"> <div class="w3-col s10"> <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding"> <input placeholder="Quantity" ng-model="quantity" type="number" min="1"> <input placeholder="Price" ng-model="price" type="number" min="1"> </div> <div class="w3-col s2"> <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button> </div> </div> <p class="w3-text-red">{{errortext}}</p> </div> </div> </body> </html>

Angular.js：如何为价格添加用户输入并保持小计

问题描述

1 个解决方案

解决方案1
0 2019-03-12 06:21:21

Angular.js：如何为价格添加用户输入并保持小计

问题描述

1 个解决方案

解决方案1 0 2019-03-12 06:21:21

解决方案1
0 2019-03-12 06:21:21