如何计算ng-repeat中的行总和?
How to calculate sum of rows in ng-repeat?
我有一个稍微不同的要求,请您在标记为重复之前通读一遍。
举个例子:
<table ng:init="stuff={items:[{description:'gadget', cost:99,date:'jan3'},{description:'thing', cost:101,date:'july6'},{description:'thing', cost:101,date:'jan3'} ]}">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
<tr ng:repeat="item in stuff.items|filter"> /*only filtered item grouped by date*/
<td>{{item.description}}</td>
<td ng-bind='item.cost'>{{item.cost}}</td>
</tr>
<tr>
<td></td>
<td>{{total}}</td> /*cost of items grouped by date jan3*/
</tr>
</table>
如何计算按项目分组的总成本?angular 中是否有任何数据属性,我可以在其中添加分组项目的成本,然后再次为下一个分组项目重新初始化它?
您可以创建自己的自定义过滤器,它将接受数组 return 您所有项目的总成本。
标记
<tr ng:repeat="item in filteredData = (stuff.items|filter)">
<td>{{item.description}}</td>
<td ng-bind='item.cost'>{{item.cost}}</td>
</tr>
<tr>
<td></td>
<td>{{filteredData| total}}</td> /*cost of items grouped by date jan3*/
</tr>
代码
app.filter('total', function(){
return function(array){
var total = 0;
angular.forEach(array, function(value, index){
if(!isNaN(value.cost))
total = total + parseFloat(value.cost);
})
return total;
}
})
Angular 1.3 添加了 create an alias to your ng-repeat
的功能,与过滤器一起使用时非常有用。
variable in expression as alias_expression
– You can also provide an optional alias expression which will then store the intermediate results of the repeater after the filters have been applied. Typically this is used to render a special message when a filter is active on the repeater, but the filtered result set is empty.
For example: item in items | filter:x as results
will store the fragment of the repeated items as results
, but only after the items have been processed through the filter.
因此,您可以使用此 as alias_expression
对列表的筛选子集执行计算。即:
<tr ng-repeat="item in stuff.items|filter as filteredStuff">
{{filteredStuff.length}}
{{calculateTotal(filteredStuff)}}
</tr>
在控制器中:
$scope.calculateTotal = function(filteredArray){
var total = 0;
angular.forEach(filteredArray, function(item){
total += item.cost;
});
return total;
};
我有一个稍微不同的要求,请您在标记为重复之前通读一遍。 举个例子:
<table ng:init="stuff={items:[{description:'gadget', cost:99,date:'jan3'},{description:'thing', cost:101,date:'july6'},{description:'thing', cost:101,date:'jan3'} ]}">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
<tr ng:repeat="item in stuff.items|filter"> /*only filtered item grouped by date*/
<td>{{item.description}}</td>
<td ng-bind='item.cost'>{{item.cost}}</td>
</tr>
<tr>
<td></td>
<td>{{total}}</td> /*cost of items grouped by date jan3*/
</tr>
</table>
如何计算按项目分组的总成本?angular 中是否有任何数据属性,我可以在其中添加分组项目的成本,然后再次为下一个分组项目重新初始化它?
您可以创建自己的自定义过滤器,它将接受数组 return 您所有项目的总成本。
标记
<tr ng:repeat="item in filteredData = (stuff.items|filter)">
<td>{{item.description}}</td>
<td ng-bind='item.cost'>{{item.cost}}</td>
</tr>
<tr>
<td></td>
<td>{{filteredData| total}}</td> /*cost of items grouped by date jan3*/
</tr>
代码
app.filter('total', function(){
return function(array){
var total = 0;
angular.forEach(array, function(value, index){
if(!isNaN(value.cost))
total = total + parseFloat(value.cost);
})
return total;
}
})
Angular 1.3 添加了 create an alias to your ng-repeat
的功能,与过滤器一起使用时非常有用。
variable in expression as alias_expression
– You can also provide an optional alias expression which will then store the intermediate results of the repeater after the filters have been applied. Typically this is used to render a special message when a filter is active on the repeater, but the filtered result set is empty.For example:
item in items | filter:x as results
will store the fragment of the repeated items asresults
, but only after the items have been processed through the filter.
因此,您可以使用此 as alias_expression
对列表的筛选子集执行计算。即:
<tr ng-repeat="item in stuff.items|filter as filteredStuff">
{{filteredStuff.length}}
{{calculateTotal(filteredStuff)}}
</tr>
在控制器中:
$scope.calculateTotal = function(filteredArray){
var total = 0;
angular.forEach(filteredArray, function(item){
total += item.cost;
});
return total;
};