如何使用 Angular 过滤器对数据进行分组？

在 Angular 中，可以使用过滤器（Filter）对数据进行分组操作。下面将介绍基础的分组过滤器的使用方法。

创建分组过滤器

首先，我们需要创建一个自定义的分组过滤器。在 Angular 中，可以通过 filter 方法来创建过滤器。

angular.module('app').filter('groupBy', function() {
  return function(input, property) {
    // 分组逻辑
  }
});

上面的代码中，我们先声明了一个 groupBy 过滤器，并通过 return 关键字返回一个函数。这个函数接收两个参数，分别为输入的数据（input）和要分组的属性（property）。

分组逻辑实现

接下来，我们需要实现具体的分组逻辑。这里我们可以通过遍历输入的数据，并将其按照指定的属性进行分组。

angular.module('app').filter('groupBy', function() {
  return function(input, property) {
    var result = {};

    for (var i = 0; i < input.length; i++) {
      var propVal = input[i][property];

      if (!result[propVal]) {
        result[propVal] = [];
      }

      result[propVal].push(input[i]);
    }

    return result;
  }
});

上面的代码中，我们创建了一个名为 result 的空对象，并通过遍历输入数据的方式将其按照指定属性进行分组。具体来说，我们首先通过 input[i][property] 来获取到当前数据的属性值，并判断 result 中是否已存在该属性值的键名。如果不存在，我们则将其添加进 result 中并创建一个空数组；如果已经存在，我们则直接将数据添加到该键名对应的数组中。

最终，我们返回一个对象，其中键名为各个属性值，对应的键值则为该属性值对应的数据列表。

使用分组过滤器

创建完毕分组过滤器后，我们就可以在 HTML 中调用它来对数据进行分组了。以一个用户列表为例，我们将其按照城市进行分组显示。

<ul ng-repeat="(city, users) in userList | groupBy: 'city'">
  <li>{{city}}</li>
  <li ng-repeat="user in users">{{user.name}}</li>
</ul>

上面的代码中，我们将 userList 按照 city 属性进行分组，并使用 ng-repeat 指令遍历各个分组结果。在 ng-repeat 中，我们使用了一种特殊的语法 "(city, users)" 来同时获取键名和键值。这里 city 代表分组结果中的城市名，users 则代表该城市名对应的用户列表。

总结

通过使用 Angular 的分组过滤器，我们可以方便地对任意数据进行分组操作。在创建过滤器时，我们需要实现具体的分组逻辑，并在 HTML 中通过指令调用该过滤器来实现分组展示。