脚本宝典收集整理的这篇文章主要介绍了angular用于计算一系列数据总和的filter,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目的:有个账单数据,需要计算这些数据的总和
//index.js
function MainController($scoPE) {
var vm = this;
vm.sum = 0;
vm.items = [
{
name: '早餐',
money: 4
},
{
name: '午餐',
money: 13
},
{
name: '晚餐',
money: 13
}
];
vm.addItem = addItem;
for (var i = vm.items.length - 1; i >= 0; i--) {
vm.sum += parseInt(vm.items[i]['money']);
}
function addItem() {
var item = {
name: '零食',
money: 5
};
vm.items.push(item);
}
return vm;
}
// index.html
<div data-ng-controller="MainController as vm">
<p>{{ sum }}</p>
<div data-ng-repeat="item in vm.items">
<span>{{ item.name }}</span>
<span>{{ item.money }}</span>
</div>
<button data-ng-click="vm.addItem()">新增支出</button>
</div>
只有在页面刷新时,才能见到正确的账单总额,但当我点击按钮添加新支出时,页面的总额却没有更新,即便我使用$watch也无效,代码如下:
$scope.$watch('vm.items', function() {
for (var i = vm.items.length - 1; i >= 0; i--) {
vm.sum += parseInt(vm.items[i]['money']);
}
});
调试可以发现,在页面刷新的时候,会进入计算得到sum,但是当我添加新支出时,是不会进入计算sum的,原因我不得而知,且不论我写的是否规范正确,如果你知道原因的,可以告诉我吗,谢谢。
我上网搜索的过程,发现了在我看来是比较优雅(装逼)的做法,就是使用filter,代码如下: