如何使用角度过滤器对数据进行分组？
我有一份球员名单，每个球员都属于一个组。如何使用筛选器列出每个组的用户？
[{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
回答 8
Stack Overflow用户
发布于 2014-07-22 13:28:25
您可以使用angular.filter模块的groupBy。
所以你可以这样做：
JS:
$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组名: gamma
\* player: Steve \* player: Scruath更新： jsbin记住使用angular.filter的基本要求，特别注意您必须将其添加到模块的依赖项中：
(1)您可以使用4种不同的方法安装angular-filter：
通过运行$
- 从终端
- 通过npm安装repository
- via -filter:通过cdnjs http://www.cdnjs.com/libraries/angular-filter
从终端
- 安装angular-filter
(2)在包含Angular本身之后，在您的index.html中包含angular-filter.js (或angular-filter.min.js)。
(3)将'angular.filter‘添加到主模块的依赖项列表中。
Stack Overflow用户
发布于 2014-05-27 14:43:08
除了上面接受的答案之外，我还使用underscore.js库创建了一个通用的“groupBy”过滤器。
JSFiddle (更新)：http://jsfiddle.net/TD7t3/
The filter
app.filter('groupBy', function() {
return _.memoize(function(items, field) {
return _.groupBy(items, field);
}
);
});注意“memoize”调用。此下划线方法缓存函数的结果，并停止angular每次计算过滤器表达式，从而防止angular达到摘要迭代限制。
The 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-repeat接收(key，values[])的组合，我们可以在后面的迭代中使用它。
更新2014年6月11日I扩展了group by筛选器，以考虑使用表达式作为键(例如嵌套变量)。在这方面，angular解析服务非常方便：
过滤器(支持表达式)
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>JSFiddle：http://jsfiddle.net/k7fgB/2/
Stack Overflow用户
发布于 2013-02-11 02:06:08
首先使用一个仅返回唯一球队的过滤器执行一个循环，然后执行一个嵌套循环，该循环返回每个当前球队的所有球员：
http://jsfiddle.net/plantface/L6cQN/
html：
<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>脚本：
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;
}
}https://stackoverflow.com/questions/14800862
复制相似问题
腾讯云开发者
