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.