我将这个产品列表作为json对象
[
{
"id": 22565423428,
"title": "SV 8GB USB Flash Memory E100",
"imageUrl": "/images/22565423428.png",
"url": "/products/22565423428",
"prices": [
{
"amount": 159.92,
"currency": "SEK"
}
]
},
{
"id": 22565423394,
"title": "Litware Wireless Mouse M35",
"imageUrl": "/images/22565423394.png",
"url": "/products/22565423394",
"prices": [
{
"amount": 239.6,
"currency": "SEK"
}
]
}
]
这是我的重复代码
<ul>
<li class="basket-item" ng-repeat="product in products">
<div class="product-item-image">
<img src={{product.imageUrl}} />
</div>
<div class="product-item-description">
<h2><a href="product.html">{{product.title}}</a></h2>
<a href="#">Description</a>
</div>
<div class="product-item-qtn">
<input type="number" name=quantity ng-model="quantity" ng-init="quantity = 0"> st
<p><b>quantiy</b>1-3</p>
</div>
<p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p>
<p class="product-item-total" >{{product.prices[0].amount * quantity}}</p>
</li>
</ul>
当用户更改数量时，总金额可以更改。
有没有办法动态获取所有产品的总金额？
<span>{{totalAmount}}</span>
答案 0 :(得分：4)
我根据你的代码提出了一个简单的例子。
两件事：
使用product.quantity代替quantity。
请参阅控制器功能calcTotal()以计算总数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Products</title>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<ul>
<li class="basket-item" ng-repeat="product in products">
<div class="product-item-image">
<img src={{product.imageUrl}} />
</div>
<div class="product-item-description">
<h2><a href="product.html">{{product.title}}</a></h2>
<a href="#">Description</a>
</div>
<div class="product-item-qtn">
<input type="number" name=quantity ng-model="product.quantity" ng-init="product.quantity = 0"> st
<p><b>quantiy</b>1-3</p>
</div>
<p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p>
<p class="product-item-total" >{{product.prices[0].amount * product.quantity}}</p>
</li>
</ul>
<h1>Total: {{calcTotal()}}</h1>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.products= [
{
"id": 22565423428,
"title": "SV 8GB USB Flash Memory E100",
"imageUrl": "/images/22565423428.png",
"url": "/products/22565423428",
"prices": [
{
"amount": 159.92,
"currency": "SEK"
}
]
},
{
"id": 22565423394,
"title": "Litware Wireless Mouse M35",
"imageUrl": "/images/22565423394.png",
"url": "/products/22565423394",
"prices": [
{
"amount": 239.6,
"currency": "SEK"
}
]
}
];
$scope.calcTotal= function(){
$scope.total = $scope.products.reduce(function(totalCost, product) {
return totalCost + product.quantity*product.prices[0].amount;
}, 0);
return $scope.total;
}
}]);
</script>
</body>
</html>
答案 1 :(得分：1)
向您的控制器添加一项功能，例如totalPrices()，它将汇总每种产品的价格。此外，您还希望quantity代替每个产品，这样在计算总数时就可以使用它。然后计算你可以做的总数：
$scope.totalPrices = function(){
var sum = 0;
angular.forEach($scope.products, function(product){
sum += product.prices[0].amount*product.quantity;
});
return sum;
}
请注意，如果您在price数组中添加更多项目，则每个项目需要另一个嵌套for循环。下面是已更改的HTML，其中添加了控制器并更改了质量的工作原理：
<body ng-app="app">
<div ng-controller="ctrl">
<ul>
<li class="basket-item" ng-repeat="product in products">
<div class="product-item-description">
<h2><a href="product.html">{{product.title}}</a></h2>
<a href="#">Description</a>
</div>
<div class="product-item-qtn">
<input type="number" name=quantity ng-model="product.quantity"> st
<p><b>quantiy</b>1-3</p>
</div>
<p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p>
<p class="product-item-total" >{{product.prices[0].amount * product.quantity}}</p>
</li>
<p>{{totalPrices()}}</p>
</ul>
</div>
</body>
答案 2 :(得分：1)
你可以这样做，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Products</title>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<ul>
<li class="basket-item" ng-repeat="product in products">
<div class="product-item-image">
<img src={{product.imageUrl}} />
</div>
<div class="product-item-description">
<h2><a href="product.html">{{product.title}}</a></h2>
<a href="#">Description</a>
</div>
<div class="product-item-qtn">
<input type="number" name=quantity ng-model="product.quantity" ng-init="product.quantity = 0"> st
<p><b>quantiy</b>1-3</p>
</div>
<p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p>
<p class="product-item-total" >{{total[$index]=product.prices[0].amount * product.quantity}}</p>
</li>
</ul>
<h1>Total: {{getTotal()}}</h1>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.products= [
{
"id": 22565423428,
"title": "SV 8GB USB Flash Memory E100",
"imageUrl": "/images/22565423428.png",
"url": "/products/22565423428",
"prices": [
{
"amount": 159.92,
"currency": "SEK"
}
]
},
{
"id": 22565423394,
"title": "Litware Wireless Mouse M35",
"imageUrl": "/images/22565423394.png",
"url": "/products/22565423394",
"prices": [
{
"amount": 239.6,
"currency": "SEK"
}
]
}
];
$scope.total=[];
$scope.getTotal=function(){
$scope.totalled=0;
for(var i=0;i<$scope.total.length;i++){
$scope.totalled=$scope.totalled+$scope.total[i];
}
return $scope.totalled;
}
}]);
</script>
</body>
</html>
您可以直接在html部分中为每个项目分配总数，然后使用这些更改在js部分中进行总计算，如下所示：
在HTML中：
`{{total[$index]=product.prices[0].amount * product.quantity}}`
在JS中：
$scope.total=[];
$scope.getTotal=function(){
$scope.totalled=0;
for(var i=0;i<$scope.total.length;i++){
$scope.totalled=$scope.totalled+$scope.total[i];
}
return $scope.totalled;
}