angular用于计算一系列数据总和的filter

zorro 发布于2019-08-21 10:44 / 3211人阅读

摘要：我上网搜索的过程，发现了在我看来是比较优雅装逼的做法，就是使用，代码如下早餐午餐晚餐零食总额新增支出可以看到在点击按钮时，总额会实时更新，至此结束，谢谢观看

目的：有个账单数据，需要计算这些数据的总和

//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 }}

可以看到在点击按钮时，总额会实时更新，至此结束，谢谢观看

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86100.html

细说数组常用遍历的方法

摘要：需要返回值，如果不给，默认返回使用场景假定有一个数值数组将数组中的值以双倍的形式放到数组写法方法使用场景假定有一个对象数组将数中对象某个属性的值存储到数组中三从数组中找出所有符合指定条件的元素检测数值元素，并返回符合条件所有元素的数组。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

阿罗 2019-08-29 17:05 评论0 收藏0
细说数组常用遍历的方法

摘要：需要返回值，如果不给，默认返回使用场景假定有一个数值数组将数组中的值以双倍的形式放到数组写法方法使用场景假定有一个对象数组将数中对象某个属性的值存储到数组中三从数组中找出所有符合指定条件的元素检测数值元素，并返回符合条件所有元素的数组。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

AlphaWatch 2019-08-02 11:48 评论0 收藏0
细说数组常用遍历的方法

摘要：需要返回值，如果不给，默认返回使用场景假定有一个数值数组将数组中的值以双倍的形式放到数组写法方法使用场景假定有一个对象数组将数中对象某个属性的值存储到数组中三从数组中找出所有符合指定条件的元素检测数值元素，并返回符合条件所有元素的数组。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

?xiaoxiao, 2019-08-23 12:32 评论0 收藏0
乐字节-Java8新特性之Stream流（下）

摘要：归约操作计算有效订单总金额有效订单总金额收集数据收集将流转换为其他形式，方法作为终端操作，接收一个接口的实现，用于给中元素做汇总的方法。接上一篇：《Java8新特性之stream》，下面继续接着讲Stream 5、流的中间操作常见的流的中间操作，归为以下三大类：筛选和切片流操作、元素映射操作、元素排序操作:showImg(https://segmentfault.com/img/b...

20171112 2019-08-19 11:36 评论0 收藏0