資訊專欄INFORMATION COLUMN
摘要：我上網搜索的過程，發現了在我看來是比較優雅裝逼的做法，就是使用，代碼如下早餐午餐晚餐零食總額新增支出可以看到在點擊按鈕時，總額會實時更新，至此結束，謝謝觀看
目的：有個賬單數據，需要計算這些數據的總和
//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 }}
只有在頁面刷新時，才能見到正確的賬單總額，但當我點擊按鈕添加新支出時，頁面的總額卻沒有更新，即便我使用$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，代碼如下：
//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 }}
可以看到在點擊按鈕時，總額會實時更新，至此結束，謝謝觀看
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86100.html
摘要：需要返回值，如果不給，默認返回使用場景假定有一個數值數組將數組中的值以雙倍的形式放到數組寫法方法使用場景假定有一個對象數組將數中對象某個屬性的值存儲到數組中三從數組中找出所有符合指定條件的元素檢測數值元素，并返回符合條件所有元素的數組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...
摘要：需要返回值，如果不給，默認返回使用場景假定有一個數值數組將數組中的值以雙倍的形式放到數組寫法方法使用場景假定有一個對象數組將數中對象某個屬性的值存儲到數組中三從數組中找出所有符合指定條件的元素檢測數值元素，并返回符合條件所有元素的數組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...
摘要：需要返回值，如果不給，默認返回使用場景假定有一個數值數組將數組中的值以雙倍的形式放到數組寫法方法使用場景假定有一個對象數組將數中對象某個屬性的值存儲到數組中三從數組中找出所有符合指定條件的元素檢測數值元素，并返回符合條件所有元素的數組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...
摘要：歸約操作計算有效訂單總金額有效訂單總金額收集數據收集將流轉換為其他形式，方法作為終端操作，接收一個接口的實現，用于給中元素做匯總的方法。 接上一篇：《Java8新特性之stream》，下面繼續接著講Stream 5、流的中間操作 常見的流的中間操作，歸為以下三大類：篩選和切片流操作、元素映射操作、元素排序操作:showImg(https://segmentfault.com/img/b...
閱讀 2446·2021-10-13 09:40
閱讀 3334·2019-08-30 13:46
閱讀 1120·2019-08-29 14:05
閱讀 2953·2019-08-29 12:48
閱讀 3654·2019-08-26 13:28
閱讀 2142·2019-08-26 11:34
閱讀 2277·2019-08-23 18:11
閱讀 1156·2019-08-23 12:26
