Question

在角度JS中，我有一个跟踪人和他们年龄的变量

$scope.people = [
    {
        name: "Lucy",
        age: "18"
    }, {
        name: "Michael",
        age: "24"
    }, {
        name: "Lisa",
        age: "46"
    }
];

用户可以通过简单的表单添加更多人：

<input ng-model="newPerson.name">
<input ng-model="newPerson.age">
<button ng-click="addNewPerson()">Add</button>

在页面底部，我想要一个简单的饼图，显示按年龄组划分的人口数量（例如，＆gt; 18,18-25,26-35,36-45,45＆lt;）。为此，我需要能够按年龄过滤$scope.people，获取每个组的数量。

我知道我可以使用普通的javascript循环遍历整个数组，获取每个年龄组的计数。每当添加一个新人时，只需增加该特定组中的计数，但我想知道是否有更高效和角度化的方式来执行此操作？

Answer 1

您可以使用lodash这样的库：_($scope.people).filter(x => x.age > 18 && x.age <= 25).count()

或者，如果您已经在ng-repeat中使用了已过滤的列表，则可以将其指定为变量并获取长度，例如：

<ul>
    <li ng-repeat="item in people | filter:filterFunction as results"></li>
</ul>
<p>{{results.length}}</p>

function filterFunction(item) {
    return item.age > 18 && item.age <= 25;
}

Answer 2

以下是使用Array.Prototype.filter和Array.Prototype.reduce实现此目标的一种方法。请注意，过滤器应用于<meta http-equiv="refresh" content="6">，其中包含$scope.ageBrackets循环准备的预处理数据。这对于小范围值（例如人的年龄）是有效的。如果您不使用forEach并且不想多次过滤数据，这是另一种选择。

＆＃13;

ng-repeat

＆＃13;

angular.module('ageBracketApp', ['ageBracketApp.controllers']);
angular.module('ageBracketApp.controllers', []).controller('ageBracketController', ['$scope',
  function($scope) {

    $scope.ageBrackets = [];

    $scope.people = [{
      name: "Lucy",
      age: "18"
    }, {
      name: "Michael",
      age: "24"
    }, {
      name: "Lisa",
      age: "46"
    }];

    angular.forEach($scope.people, function(value, key) {
      $scope.ageBrackets[value.age] = $scope.ageBrackets[value.age] + 1 || 1;
    });

    $scope.addPerson = function() {
      var age = Math.floor(Math.random() * (123 - 1 + 1)) + 1; // random between 1 and 123
      $scope.people.push({
        name: 'Person ' + ($scope.people.length + 1),
        age: age
      });
      $scope.ageBrackets[age] = $scope.ageBrackets[age] + 1 || 1;

    };

    $scope.ageBracketCount = function(min, max) {
      max = max || Number.MAX_SAFE_INTEGER;
      return $scope.ageBrackets.filter(function(value, index, array) {
        return index >= min && index <= max;
      }).reduce(function(a, b) {
        return a + b;
      }, 0);
    };
  }
]);

＆＃13;

（Angular.js）如何通过过滤器计算数组中有多少项？

2 个答案: