それぞれのグループに所属するプレイヤーのリストがあります。フィルターを使用してグループごとにユーザーを一覧表示するにはどうすればよいですか?
[{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'}];
私はこの結果を探しています：
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
* プレイヤー: Gene
グループ名: beta
* プレイヤー: George
* プレイヤー: Paula
グループ名: gamma
* プレイヤー: Steve
* プレイヤー: Scruath
更新: jsbinを使用するための基本的な要件を覚えておいてくださいangular.filter。具体的には、モジュールの依存関係に追加する必要があることに注意してください。
(1) 4 つの異なる方法を使用して angular-filter をインストールできます。
- このリポジトリをクローンしてビルドする
- Bower 経由: ターミナルから $ bower install angular-filter を実行
- npm経由: 端末から $ npm install angular-filter を実行
- cdnjs 経由http://www.cdnjs.com/libraries/angular-filter
(2) Angular 自体を含めた後、index.html に angular-filter.js (または angular-filter.min.js) を含めます。
(3) メイン モジュールの依存関係のリストに「angular.filter」を追加します。
上記の受け入れられた回答に加えて、underscore.js ライブラリを使用して一般的な「groupBy」フィルターを作成しました。
JSFiddle (更新): http://jsfiddle.net/TD7t3/
フィルター
app.filter('groupBy', function() {
return _.memoize(function(items, field) {
return _.groupBy(items, field);
}
);
});
'memoize' 呼び出しに注意してください。このアンダースコア メソッドは、関数の結果をキャッシュし、angular が毎回フィルター式を評価するのを停止します。これにより、angular がダイジェストの反復制限に達するのを防ぎます。
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>
「team」プロパティの teamPlayers スコープ変数に「groupBy」フィルターを適用します。ng-repeat は、次の反復で使用できる (key, values[]) の組み合わせを受け取ります。
更新 2014 年 6 月 11 日 キーとしての式の使用 (ネストされた変数など) を考慮して、フィルターによるグループを拡張しました。angular parse サービスは、これに非常に役立ちます。
フィルター (式のサポートあり)
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/
まず、一意のチームのみを返すフィルターを使用してループを実行し、次に現在のチームごとにすべてのプレイヤーを返すネストされたループを実行します。
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;
}
}
両方の答えが良かったので、それらをディレクティブに移動して、再利用可能にし、2 つ目のスコープ変数を定義する必要がないようにしました。
実装を確認したい場合は、ここにフィドルがあります
以下はディレクティブです。
var uniqueItems = function (data, key) {
var result = [];
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
myApp.filter('groupBy',
function () {
return function (collection, key) {
if (collection === null) return;
return uniqueItems(collection, key);
};
});
次に、次のように使用できます。
<div ng-repeat="team in players|groupBy:'team'">
<b>{{team}}</b>
<li ng-repeat="player in players | filter: {team: team}">{{player.name}}</li>
</div>
Ariel M. によって提案された古いバージョンのソリューションを他の sと組み合わせると$filter、「Infite $diggest ループ エラー」 ( infdig)がトリガーされたため、最初にこの回答を書きました。幸いなことに、この問題はangular.filterの最新バージョンで解決されています。
その問題のない次の実装を提案しました。
angular.module("sbrpr.filters", [])
.filter('groupBy', function () {
var results={};
return function (data, key) {
if (!(data && key)) return;
var result;
if(!this.$id){
result={};
}else{
var scopeId = this.$id;
if(!results[scopeId]){
results[scopeId]={};
this.$on("$destroy", function() {
delete results[scopeId];
});
}
result = results[scopeId];
}
for(var groupKey in result)
result[groupKey].splice(0,result[groupKey].length);
for (var i=0; i<data.length; i++) {
if (!result[data[i][key]])
result[data[i][key]]=[];
result[data[i][key]].push(data[i]);
}
var keys = Object.keys(result);
for(var k=0; k<keys.length; k++){
if(result[keys[k]].length===0)
delete result[keys[k]];
}
return result;
};
});
ただし、この実装は Angular 1.3 より前のバージョンでのみ機能します。(すべてのバージョンで動作するソリューションを提供するために、この回答をまもなく更新します。)
これを開発するために取った手順、遭遇した問題、そこから学んだことについて、実際に記事を書き$filterました。