資訊專欄INFORMATION COLUMN
摘要：我上網(wǎng)搜索的過(guò)程，發(fā)現(xiàn)了在我看來(lái)是比較優(yōu)雅裝逼的做法，就是使用，代碼如下早餐午餐晚餐零食總額新增支出可以看到在點(diǎn)擊按鈕時(shí)，總額會(huì)實(shí)時(shí)更新，至此結(jié)束，謝謝觀看
目的：有個(gè)賬單數(shù)據(jù)，需要計(jì)算這些數(shù)據(jù)的總和
//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
{{ sum }}
{{ item.name }}
{{ item.money }}
只有在頁(yè)面刷新時(shí)，才能見(jiàn)到正確的賬單總額，但當(dāng)我點(diǎn)擊按鈕添加新支出時(shí)，頁(yè)面的總額卻沒(méi)有更新，即便我使用$watch也無(wú)效，代碼如下：
$scope.$watch("vm.items", function() {
for (var i = vm.items.length - 1; i >= 0; i--) {
vm.sum += parseInt(vm.items[i]["money"]);
}
});
調(diào)試可以發(fā)現(xiàn)，在頁(yè)面刷新的時(shí)候，會(huì)進(jìn)入計(jì)算得到sum，但是當(dāng)我添加新支出時(shí)，是不會(huì)進(jìn)入計(jì)算sum的，原因我不得而知，且不論我寫的是否規(guī)范正確，如果你知道原因的，可以告訴我嗎，謝謝。
我上網(wǎng)搜索的過(guò)程，發(fā)現(xiàn)了在我看來(lái)是比較優(yōu)雅（裝逼）的做法，就是使用filter，代碼如下：
//index.js
angular.module("deapp", [])
.controller("MainController", ["$scope", MainController]);
function MainController($scope) {
var vm = this;
vm.items = [
{
name: "早餐",
money: 4
},
{
name: "午餐",
money: 13
},
{
name: "晚餐",
money: 13
}
];
vm.addItem = addItem;
function addItem() {
var item = {
name: "零食",
money: 5
};
vm.items.push(item);
}
return vm;
}
//filter.js
angular.module("deapp")
.filter("sumOfItems", sumOfItems);
function sumOfItems() {
return function(data, key){
if(typeof(data) === undefined || typeof(key) === undefined ) {
return 0;
}
var sum = 0,
i = data.length - 1;
for(; i >= 0; i--) {
sum += parseInt(data[i][key]);
}
return sum;
};
}
//index.html
angularjs filter
總額：{{ vm.items | sumOfItems:"money" }}
{{ item.name }}
{{ item.money }}
可以看到在點(diǎn)擊按鈕時(shí)，總額會(huì)實(shí)時(shí)更新，至此結(jié)束，謝謝觀看
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86100.html
摘要：需要返回值，如果不給，默認(rèn)返回使用場(chǎng)景假定有一個(gè)數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場(chǎng)景假定有一個(gè)對(duì)象數(shù)組將數(shù)中對(duì)象某個(gè)屬性的值存儲(chǔ)到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測(cè)數(shù)值元素，并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...
摘要：需要返回值，如果不給，默認(rèn)返回使用場(chǎng)景假定有一個(gè)數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場(chǎng)景假定有一個(gè)對(duì)象數(shù)組將數(shù)中對(duì)象某個(gè)屬性的值存儲(chǔ)到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測(cè)數(shù)值元素，并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...
摘要：需要返回值，如果不給，默認(rèn)返回使用場(chǎng)景假定有一個(gè)數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場(chǎng)景假定有一個(gè)對(duì)象數(shù)組將數(shù)中對(duì)象某個(gè)屬性的值存儲(chǔ)到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測(cè)數(shù)值元素，并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...
摘要：歸約操作計(jì)算有效訂單總金額有效訂單總金額收集數(shù)據(jù)收集將流轉(zhuǎn)換為其他形式，方法作為終端操作，接收一個(gè)接口的實(shí)現(xiàn)，用于給中元素做匯總的方法。 接上一篇：《Java8新特性之stream》，下面繼續(xù)接著講Stream 5、流的中間操作 常見(jiàn)的流的中間操作，歸為以下三大類：篩選和切片流操作、元素映射操作、元素排序操作:showImg(https://segmentfault.com/img/b...
閱讀 2555·2021-10-13 09:40
閱讀 3451·2019-08-30 13:46
閱讀 1190·2019-08-29 14:05
閱讀 3020·2019-08-29 12:48
閱讀 3725·2019-08-26 13:28
閱讀 2218·2019-08-26 11:34
閱讀 2360·2019-08-23 18:11
閱讀 1257·2019-08-23 12:26
