Angular.js: How to add userinput for price and keep subtotal
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>
1 answers
solution1
0 2019-03-12 06:21:21
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. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to keep + and - in ng-pattern using Angular.js
How to add crop image using Angular.js
how to add a number with filter return value in angular.js
How to add hidden filed to form with Angular.js
How do I add google map in angular.js controller?
How to add multiple condition in a single class using Angular.js
How to add new key and value to array using angular.js?
How to add/ remove createElement from DOM in Angular.js
Angular.JS how to add a delay to Instant Search?
How can i add a scope to a http controller in angular.js?
Related Tags