javascript - (Angular.js) 如何通过过滤器计算数组中有多少项？

Question

在 Angular 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>

在页面底部，我想要一个简单的饼图，按年龄组显示人口，例如(>18、18-25、26-35、36-45、45<)。为此，我需要能够按年龄过滤 $scope.people，获取每个组的人数。

我知道我可以使用普通的 JavaScript 来循环整个数组，获取每个年龄组的计数。每当添加一个新人时，只需增加该特定组中的计数，但我想知道是否有一种更有效且更 Angular 方法来做到这一点？

Answer 1

这是使用 Array.Prototype.filter 实现此目的的一种方法和 Array.Prototype.reduce 。请注意，过滤器应用于 $scope.ageBrackets，其中包含由 forEach 循环准备的预处理数据。这对于小范围值(例如人的年龄)非常有效。如果您不使用 ng-repeat 并且不想多次过滤数据，这是一种替代方案。

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);
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ageBracketApp" ng-controller="ageBracketController">
  {{people}}
  <hr />18+: {{ageBracketCount(18)}}
  <br />18-25: {{ageBracketCount(18,25)}}
  <br />26-35: {{ageBracketCount(26,35)}}
  <br />40-: {{ageBracketCount(0,40)}}
  <hr />
  <button ng-click="addPerson()">
    Add person
  </button>
</div>