AngularJS - 角度过滤器组按外键

Question

我一直在尝试按语言对所有年龄段的用户求和。图像显示基于其各自对象所需的结果。

请参阅以下源代码，以更详细地了解我需要做什么。

JSFiddle source code

var demoApp = angular.module("demoApp", ["angular.filter"]);
demoApp.controller("MainController", function($scope) {
  $scope.languages = [{
    id: 1,
    name: "Java"
  }, {
    id: 2,
    name: "PHP"
  }, {
    id: 3,
    name: "Python"
  }];

  $scope.users = [{
    id: 1,
    name: "Daniel",
    age: 25,
    language: {
      id: 1,
      name: "Java"
    }
  }, {
    id: 2,
    name: "Michael",
    age: 23,
    language: {
      id: 1,
      name: "Java"
    }
  }, {
    id: 3,
    name: "Robbie",
    age: 28,
    language: {
      id: 1,
      name: "Java"
    }
  }, {
    id: 4,
    name: "Joey",
    age: 26,
    language: {
      id: 3,
      name: "Python"
    }
  }, {
    id: 5,
    name: "Billy",
    age: 29,
    language: {
      id: 3,
      name: "Python"
    }
  }];
  $scope.sumByLanguage = function() { // 
    // Here I need to sum by "language.name"
    var total = 0;
    for (count = 0; count < $scope.users.length; count++) {
      total += $scope.users[count].age;
    }
    return total;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController">
  <div ng-repeat="(key, value) in users | groupBy: 'language.name'">
    Language:
    <label>{{key}}</label>
    <div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <td>#</td>
            <td>Name</td>
            <td>Age</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="user in value">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td colspan="2" class="text-right">Total</td>
            <td>{{sumByLanguage()}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

只需将$scope.sumByLanguage = function(language.name)更改为$scope.sumByLanguage = function(language)

即可