我绝对是 Angular 的新手，通过制作一个简单的购物网页来学习它。
我创建了一个输入，您可以在其中输入每个产品的项目数量，它还会在相同的 <div> 上显示每个项目的成本。 .
例如，一支笔是 1 美元，我选择了 2 支，它会显示这支笔的总成本是 2 美元 <div> ;一支铅笔是 2 美元，我选择了 1 支，它会在铅笔上显示 2 美元 <div> .
但是，我在以 Angular 方式将所有产品的小计放在一起时遇到了麻烦(比如将钢笔和铅笔加到总 div 上)。
所以这是我的 html 代码的一部分(我只展示了一部分，因为它太长了):
<body ng-controller="StoreController as store">
<header>
<h1 class="text-left">Hello Auntie</h1>
</header>
<div class="list-group">
<div class="list-group-item" ng-repeat="product in store.products">
<h3>{{product.name}}
<input placeholder="Enter Qty here..." onfocus="this.type='number';" min="0"ng-model="product.quantity"/>
<em class="pull-right">
{{product.price | currency}}
<em class="pull-bottom"><p><font size="2">total cost: {{product.quantity * product.price | currency}}</font></p></em>
</em>
</h3>
这是我的 js 文件中的代码:
(function (){
var app = angular.module('helloAuntie', []);
app.controller('StoreController', function(){
this.products = fashion;
});
var fashion =[{
name: 'Dress',
description: "100% cotton, free size, handmade item",
quantity: 0,
total: 0,
price: 30.99,
images:"image/dress.jpg",
reviews: [{
stars: 5,
body: "The most beautiful dress ever!",
author: "hotGirl@angular.com"
},{
stars: 3,
body: "The dress is very pretty, but the size is smaller than I expected",
author: "fatgirl@angular.com"
}]
},{
name: 'Rainbow Short',
description: "Size: M/S, jeans quality",
quantity: 0,
total: 0,
price: 20,
images: "image/short.jpg",
reviews: [{
stars: 8,
body: "Best outfit for coachella!",
author: "hippies@angular.com"
},{
stars: 1,
body: "after I washed it, the color was just fading, I am so disappointed",
author: "disappointed@angular.com"
},{
stars: 3,
body: "the quality is just ok, but hey 20$, what do you expect?",
author: "feelOkcustomer@angular.com"
}]
},{
name: 'Shirt',
description: "Size: M/S, free size",
quantity: 0,
total: 0,
price: 15.50,
images: "image/shirt.jpg",
reviews: [{
stars: 1,
body: "Worst quality ever!",
author: "socheap@angular.com"
}]
}];
})();
最佳答案
您只需要调用一个函数，以便在用户每次更改值时重新计算他们购物车的总价。试试这个
为你的输入标签添加一个ID
<input id="some_input_id" placeholder="Enter Qty here..." onfocus="this.type='number';" min="0"ng-model="product.quantity"/>
您需要跟踪您的输入，以便知道它们的值何时更改。接下来在你的 JS 文件中添加
app.controller('StoreController', function(){
this.products = fashion;
this.totals = 0;
//This function calculates the user's total and stores it in this.totals
this.updateTotals = function(){
this.totals = 0;
for each(var product in this.products){
this.totals += (product.quantity * product.price);
}
}
//Finally we add an event to be called every time one of the quantities on one of the products is changed
jQuery('#some_input_id').on('input', function() {
this.updateTotals();
});
});
现在您可以在 html 文件的 Controller 区域的某处添加 {{totals}}，每次用户更改数量时它都会更新
关于javascript - Angular : How to get the total for a shopping website，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30151003/