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 Название переменной, как это в вашем 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.