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

可能不是<style> html, body { height: 100%; } img.one { height: auto; width: auto; } img.two { height: 50%; width: 50%; } </style>解决方案。但你也可以通过纯Angular得到总数。

在JavaScript

中保持total $scope这样的可变性

controller

Here是已更新的$scope.total = getTotal(data); function getTotal(data){ var total = 0; data.forEach(function(item){ item.products.forEach(function(product){ total += product.quantity; }) }); return total; }。

Answer 2

也可以用角度来完成。

示例：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;
  }
});

AngularJS：对来自多个对象的嵌套对象求和

2 个答案: