首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用角度过滤器对数据进行分组?

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

Stack Overflow用户
提问于 2013-02-11 02:06:08
回答 8查看 171K关注 0票数 137

我有一份球员名单,每个球员都属于一个组。如何使用筛选器列出每个组的用户?

代码语言:javascript
复制
[{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'}];

我正在寻找这样的结果:

  • team alpha
    • Gene

  • team beta
    • George
    • Paula

第五届sector的

  • team gamma

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2014-07-22 13:28:25

您可以使用angular.filter模块的groupBy。

所以你可以这样做:

JS:

代码语言:javascript
复制
$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];

HTML:

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

结果:

组名称: alpha

代码语言:javascript
复制
 \* player: Gene

组名: beta

代码语言:javascript
复制
 \* player: George
代码语言:javascript
复制
 \* player: Paula

组名: gamma

代码语言:javascript
复制
 \* player: Steve
代码语言:javascript
复制
 \* player: Scruath

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

(1)您可以使用4种不同的方法安装angular-filter:

通过运行$

  • 从终端

  • 通过npm安装repository

从终端

  • 安装angular-filter

(2)在包含Angular本身之后,在您的index.html中包含angular-filter.js (或angular-filter.min.js)。

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

票数 184
EN

Stack Overflow用户

发布于 2014-05-27 14:43:08

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

JSFiddle (更新):http://jsfiddle.net/TD7t3/

The filter

代码语言:javascript
复制
app.filter('groupBy', function() {
    return _.memoize(function(items, field) {
            return _.groupBy(items, field);
        }
    );
});

注意“memoize”调用。此下划线方法缓存函数的结果,并停止angular每次计算过滤器表达式,从而防止angular达到摘要迭代限制。

The html

代码语言:javascript
复制
<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-repeat接收(key,values[])的组合,我们可以在后面的迭代中使用它。

更新2014年6月11日I扩展了group by筛选器,以考虑使用表达式作为键(例如嵌套变量)。在这方面,angular解析服务非常方便:

过滤器(支持表达式)

代码语言:javascript
复制
app.filter('groupBy', function($parse) {
    return _.memoize(function(items, field) {
        var getter = $parse(field);
        return _.groupBy(items, function(item) {
            return getter(item);
        });
    });
});

控制器(带有嵌套对象)

代码语言:javascript
复制
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表达式)

代码语言:javascript
复制
<li ng-repeat="(team, players) in teamPlayers | groupBy:'team.name'">
    {{team}}
    <ul>
        <li ng-repeat="player in players">
            {{player.name}}
        </li>
    </ul>
</li>

JSFiddle:http://jsfiddle.net/k7fgB/2/

票数 25
EN

Stack Overflow用户

发布于 2013-02-11 02:06:08

首先使用一个仅返回唯一球队的过滤器执行一个循环,然后执行一个嵌套循环,该循环返回每个当前球队的所有球员:

http://jsfiddle.net/plantface/L6cQN/

html:

代码语言:javascript
复制
<div ng-app ng-controller="Main">
    <div ng-repeat="playerPerTeam in playersToFilter() | filter:filterTeams">
        <b>{{playerPerTeam.team}}</b>
        <li ng-repeat="player in players | filter:{team: playerPerTeam.team}">{{player.name}}</li>        
    </div>
</div>

脚本:

代码语言:javascript
复制
function Main($scope) {
    $scope.players = [{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'}];

    var indexedTeams = [];

    // this will reset the list of indexed teams each time the list is rendered again
    $scope.playersToFilter = function() {
        indexedTeams = [];
        return $scope.players;
    }

    $scope.filterTeams = function(player) {
        var teamIsNew = indexedTeams.indexOf(player.team) == -1;
        if (teamIsNew) {
            indexedTeams.push(player.team);
        }
        return teamIsNew;
    }
}
票数 19
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14800862

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档