Angular.js：如何为价格添加用户输入并保持小计
Posted
技术标签:
【中文标题】Angular.js：如何为价格添加用户输入并保持小计【英文标题】：Angular.js: How to add userinput for price and keep subtotal 【发布时间】：2019-08-02 12:17:46 【问题描述】：全部。 我正在尝试制作一个包含一系列食物的购物清单，并且在每个食品项目旁边提示用户输入价格和数量，然后保持所有项目的运行小计，我有基本的但真的在“价格框”中挣扎数量和小计。
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】：确实有更好的方法来构建代码，但最重要的是，您需要让您的 products 数组包含具有您需要的所有属性（名称、数量和价格）的对象，并且当您添加一个项目时，您只需推送整个数组的新对象，而不仅仅是名称。在 ng-repeat 中有一个对象意味着现在您需要相应地访问需要在视图中显示的属性。请看代码sn-p
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：如何为价格添加用户输入并保持小计的主要内容，如果未能解决你的问题，请参考以下文章
如何为 JavaFX 中的 ComboBox 中的项目添加值
如何为动态添加的新输入行设置 ngModel 角度 4+（mat-table）