AngularJS：从多个对象中总结嵌套对象

Question

基于以下table我需要获取所有小计的总和。

我试图使用相同的sumByKey过滤器，但我没有工作。 另外，所有小计的总和必须基于过滤器的结果，这意味着，如果我们有两个结果（两个类别），则小计的总和必须基于这些对象。任何想法？

HTML

<table border="1"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>Category</th> 
     <th>Products with quantities</th> 
     <th>Subtotal of quantities</th> 
    </tr> 
    </thead> 
    <tbody align="center"> 
    <tr data-ng-repeat="category in categories | filter:search"> 
     <td>{{$index+1}}</td> 
     <td>{{category.name}}</td> 
     <td>{{category.products}}</td> 
     <td>{{category.products | sumByKey:'quantity'}}</td> 
    </tr> 
    </tbody> 
    <thead align="right"> 
    <tr> 
     <td colspan="3"><strong>Total</strong></td> 
     <td></td> 
    </tr> 
    </thead> 
</table> 

angularjs

var app = angular.module("app", []); 
app.controller("controllerApp", function($scope, $http){ 
    $http.get("categories.json").success(function(data) { 
     $scope.categories = data; 
    }); 
}); 

app.filter('sumByKey', function() { 
    return function (data, key) { 
     if (typeof (data) === 'undefined' || typeof (key) === 'undefined') { 
     return 0; 
    } 
    var sum = 0; 
    for (var i = data.length - 1; i >= 0; i--) { 
     sum += parseInt(data[i][key]); 
    } 
    return sum; 
} 
}); 

Answer 1

它也可以用角度来完成。

实施例：http://plnkr.co/edit/zhTtoOjW7J1oumktlvFP?p=preview

HTML：

<table border="1"> 
     <thead> 
     <tr> 
      <th>#</th> 
      <th>Category</th> 
      <th>Products with quantities</th> 
      <th>Subtotal of quantities</th> 
     </tr> 
     </thead> 
     <tbody align="center"> 
     <tr data-ng-repeat="category in filterValues=(categories | filter:search)"> 
      <td>{{$index+1}}</td> 
      <td>{{category.name}}</td> 
      <td>{{category.products}}</td> 
      <td>{{category.products | sumByKey:'quantity'}}</td> 
     </tr> 
     </tbody> 
     <thead align="right"> 
     <tr> 
      <td colspan="3"><strong>Total</strong></td> 
      <td>{{filterValues | sumOfValue:'quantity'}}</td> 
     </tr> 
     </thead> 
    </table> 

JS：

// Code goes here 
var app = angular.module("app", []); 
app.controller("controllerApp", function($scope, $http) { 
    $http.get("categories.json").success(function(data) { 
    $scope.categories = data; 
    }); 
}); 

app.filter('sumByKey', function() { 
    return function(data, key) { 
    if (typeof(data) === 'undefined' || typeof(key) === 'undefined') { 
     return 0; 
    } 
    var sum = 0; 
    for (var i = data.length - 1; i >= 0; i--) { 
     sum += parseInt(data[i][key]); 
    } 
    return sum; 
    } 
}); 

app.filter('sumOfValue', function() { 
    return function(data, key) { 
    if (angular.isUndefined(data) || angular.isUndefined(key)) { 
     return 0; 
    } 
    var sum = 0; 
    for (var i = 0; i < data.length; i++) { 
     var value = data[i]; 
     if (!angular.isUndefined(value)) { 
     for (var j = 0; j < value.products.length; j++) { 
      sum += parseInt(value.products[j][key]); 
     } 
     } 
    } 
    return sum; 
    } 
}); 

Answer 2

未必Angular解决方案。但你也可以通过纯粹的JavaScript得到总数。

通过保持一个total$scope varaible像这里面你controller

 $scope.total = getTotal(data); 
    function getTotal(data){ 
     var total = 0; 
     data.forEach(function(item){ 
     item.products.forEach(function(product){ 
      total += product.quantity; 
     }) 
     }); 
     return total; 
    } 

Here是更新Plunker。