javascript - 过滤器不适用于函数返回值

Question

我正在使用 Angular 的货币过滤器。它似乎没有过滤从函数返回的数据。我想我错过了什么。可能是过滤器被消化的时候？

这是我的代码片段:

html模板文件

<span>total: {{ vm.total.exgst | currency}}<span>

用于 html 模板的 controller.js

var calculateTotalExGST = function() { return _.sum(vm.items, function(item)
                                                   { return item.cost; });
                                      };
vm.total = { exgst: calculateTotalExGST() };

所以 html 以某种方式显示

total: 5

但它应该显示为 $5.00。返回值但函数但过滤器不起作用。 $digest 发生时可以做点什么吗？

谁能帮我解释一下？

编辑:关于代码的更多信息，vm.items 是来自 ui-router 的 $state 的值。

我不确定如何将所有这些都放入 jsfiddler 中。所以我只是 mock 了$state。但不幸的是，我无法复制我的问题。

https://jsfiddle.net/ex5rj9u7/

Answer 1

我认为你使用了错误的方法。在 Lodash 文档中，sum 仅用于数组。您正在寻找 sumBy 方法。

看看这个例子:https://jsfiddle.net/relferreira/dng7s3qs/

JS:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope){

    var vm = this;

  vm.items = [
    { cost: 5},
    { cost: 5}
  ];

    var calculateTotalExGST = function() { 
    return _.sumBy(vm.items, function(item){ 
        return item.cost; 
    });
  };

  console.log(calculateTotalExGST())

    vm.total = { exgst: calculateTotalExGST() };


}

HTML:

<div data-ng-app="app">

  <section ng-controller="MainController as mainVm">
    <span>total: {{ mainVm.total.exgst | currency}}</span>
  </section>

</div>