Angular.js：如何为价格添加用户输入并保持小计
[英]Angular.js: How to add userinput for price and keep 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>
1 个解决方案
解决方案1
0 2019-03-12 06:21:21
确实有更好的方法来组织代码，但最重要的是，您需要使产品数组包含具有所需所有属性（名称，数量和价格）的对象，并且在添加项目时，只需将整个新对象压入数组，而不仅仅是名称。 在ng-repeat中有一个对象意味着您现在需要相应地访问需要在视图中显示的属性。 请参阅代码段
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在ng模式中保持+和-
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.