我扩展了 Angular filter group by通过将团队转换为对象来示例以下内容。
var app = angular.module('myApp',['angular.filter']);
app.controller('MainController', ['$scope', function($scope){
$scope.players = [
{
name: 'Gene',
team: {
'id' : '1',
'name' : 'alpha'
}
},
{
name: 'George',
team: {
'id' : '2',
'name' : 'beta'
}
},
{
name: 'Steve',
team: {
'id' : '3',
'name' : 'gamma'
}
},
{
name: 'Paula',
team: {
'id' : '2',
'name' : 'beta'
}
},
{
name: 'Scruath',
team: {
'id' : '3',
'name' : 'gamma'
}
}
];
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
<ul>
<li ng-repeat="(team, players) in players | groupBy: 'team.name'">
<a href="#I need the team ID">Group name: {{ team }}</a>
<ul>
<li ng-repeat="player in players">
player: {{ player.name }}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>但是，如果我需要 group by 中的团队 ID 怎么办？我能做什么？
<a href="#I need the team ID">Group name: {{ team }}</a>
我尝试按团队对象分组并使用 team.name 和 team.id 但它不起作用。另外，我不知道如何使用多个字段创建一个组 (team.id, team.name)
这是一个 working plnkr
最佳答案
我有一个简单的解决方案:
我按team.id 分组
<li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">
然后我用了:组内的players[0].team.name
<li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">
<a href="#Here I can use the group teamid">Group name: {{ players[0].team.name }}</a>
<ul>
<li ng-repeat="player in players">
player: {{ player.name }}
</li>
</ul>
</li>
由于每个组中的 players 只是属于该组的玩家，他们都拥有相同的团队，所以 players[0], players[ 1] 等等将具有相同的团队名称。
var app = angular.module('myApp',['angular.filter']);
app.controller('MainController', ['$scope', function($scope){
$scope.players = [
{
name: 'Gene',
team: {
'id' : '1',
'name' : 'alpha'
}
},
{
name: 'George',
team: {
'id' : '2',
'name' : 'beta'
}
},
{
name: 'Steve',
team: {
'id' : '3',
'name' : 'gamma'
}
},
{
name: 'Paula',
team: {
'id' : '2',
'name' : 'beta'
}
},
{
name: 'Scruath',
team: {
'id' : '3',
'name' : 'gamma'
}
}
];
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
<ul>
<li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">
<a href="#Here I can use the group teamid">Group name: {{ players[0].team.name }}</a>
<ul>
<li ng-repeat="player in players">
player: {{ player.name }}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>关于javascript - Angular 过滤器 - 按对象(或多个字段)分组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43178798/