如何使用角度过滤器对数据进行分组?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (11)

我有一个球员的名单,他们属于一个团体,每个人。如何使用筛选器列出每个组的用户?

[{name: 'Gene', team: 'team alpha'},
 {name: 'George', team: 'team beta'},
 {name: 'Steve', team: 'team gamma'},
 {name: 'Paula', team: 'team beta'},
 {name: 'Scruath of the 5th sector', team: 'team gamma'}];
提问于
用户回答回答于

所以你可以这样做:

联署材料:

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];

HTML:

<ul ng-repeat="(key, value) in players | groupBy: 'team'">
  Group name: {{ key }}
  <li ng-repeat="player in value">
    player: {{ player.name }} 
  </li>
</ul>

结果:

组名:Alpha

 \* player: Gene

组名:beta

 \* player: George
 \* player: Paula

团体名称:伽马

 \* player: Steve
 \* player: Scruath

最新情况:记住要使用的基本要求angular.filter,特别要注意的是,必须将其添加到模块的依赖项中:

(1)你可以用4种不同的方法安装角度过滤器:

  1. 克隆&构建这个存储库
  2. Via Bower:通过运行$Bower,从终端安装角度过滤器。
  3. 通过npm:通过运行$npm从终端安装角度过滤器
  4. 通过cdnjs

(2)在index.html中包含了角本身之后,在index.html中包含角-filter.js(或角-filter.min.js)。

(3)在主模块的依赖项列表中添加‘angular.filter’。

用户回答回答于

除了上面接受的答案之外,我还使用underscore.js库创建了一个通用的‘groupBy’过滤器。

过滤器

app.filter('groupBy', function() {
    return _.memoize(function(items, field) {
            return _.groupBy(items, field);
        }
    );
});

注意‘回忆录’的召唤。该下划线方法缓存函数的结果,并停止每次对筛选器表达式求值,从而防止角达到摘要迭代限制。

html

<ul>
    <li ng-repeat="(team, players) in teamPlayers | groupBy:'team'">
        {{team}}
        <ul>
            <li ng-repeat="player in players">
                {{player.name}}
            </li>
        </ul>
    </li>
</ul>

我们在“TeamPlayers”范围变量和“Team”属性上应用‘GroupBy’过滤器。我们的ng-重复接收(key,value[])的组合,我们可以在下面的迭代中使用这些组合。

过滤器(支持表达式)

app.filter('groupBy', function($parse) {
    return _.memoize(function(items, field) {
        var getter = $parse(field);
        return _.groupBy(items, function(item) {
            return getter(item);
        });
    });
});

控制器(带有嵌套对象)

app.controller('homeCtrl', function($scope) {
    var teamAlpha = {name: 'team alpha'};
    var teamBeta = {name: 'team beta'};
    var teamGamma = {name: 'team gamma'};

    $scope.teamPlayers = [{name: 'Gene', team: teamAlpha},
                      {name: 'George', team: teamBeta},
                      {name: 'Steve', team: teamGamma},
                      {name: 'Paula', team: teamBeta},
                      {name: 'Scruath of the 5th sector', team: teamGamma}];
});

html(带有sortBy表达式)

<li ng-repeat="(team, players) in teamPlayers | groupBy:'team.name'">
    {{team}}
    <ul>
        <li ng-repeat="player in players">
            {{player.name}}
        </li>
    </ul>
</li>

扫码关注云+社区