2016-03-25 5 views
7

私はAngular-FiltergroupByフィルタを使用しています。 GitHubのからAngular-Filterを使用して複数のフィールドでグループ化できますか?

例:チームによって

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

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

したがって、たとえばグループ選手のコレクション。すべての選手オブジェクトのための年齢プロパティがあります想像:私はチーム年齢によってグループ化したい

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

。どうやってやるの?

+0

の一例をフォローしたいと仮定していますしてみてください別のグループを追加する –

+0

期待される結果は何ですか?何を試しましたか?ネストされた 'groupBy'のように思えます。 – charlietfl

答えて

13

として複数の値を使用して作成するグループは複数のフィールド

angular.module('app',['angular.filter']) 
 
    .controller('MainController', function($scope) { 
 
    $scope.players = [ 
 
     {name: 'Gene', team: 'alpha', age: 19}, 
 
     {name: 'George', team: 'beta', age: 19}, 
 
     {name: 'Steve', team: 'gamma', age: 23}, 
 
     {name: 'Paula', team: 'beta', age: 23}, 
 
     {name: 'Scruath', team: 'gamma', age: 23} 
 
    ]; 
 
});
<!DOCTYPE html> 
 
<html ng-app="app"> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script> 
 
    
 
<meta name="description" content="[groupBy example]"/> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div ng-controller="MainController"> 
 

 
<ul ng-repeat="(key, value) in players | groupBy: '[team,age]'"> 
 
    <b>Group name: {{key}}</b> 
 
    <br> 
 
    <li ng-repeat="player in value"> 
 
    <b>player:</b> {{ player.name }} 
 
    <br> 
 
    <b>team:</b> {{player.team}} 
 
    <br> 
 
    <span ng-if="player.age"><b>age:</b> {{ player.age }}</span> 
 
    </li> 
 
</ul> 
 
    </div> 
 
</body> 
 
</html>

+0

あなたのhtmlで複数のキーを個別にアクセスするにはどうすればいいですか?キーは「チーム、年齢」の文字列になるようですが、それを分割する必要はありますか? {{key.team}}は未定義です。 –

+0

私自身のコメントに答えるには、 '{{value [0] .team}}'と '{{value [0] .age}}'がそのトリックを行います。 groupbyを使うと、「チーム」と「年齢」(またはグループ)ごとに少なくとも1つの行を数えることができるはずなので、 'count> 0'をチェックする必要はありません。エレガントではありませんが、それはうまく動作し信頼できるはずです。キーに複数のフィールドを使用する場合、キーがjsonまたは何かになることを望みます。 –

2

は、次の私はあなただけ試したことがありますが、基準

ng-repeat="(key, value) in players | groupBy: '[team,age]'" 
+0

これは質問に対する答えを提供しません。十分な[評判](http://stackoverflow.com/help/whats-reputation)があれば、[任意の投稿にコメントする]ことができます(http://stackoverflow.com/help/privileges/comment)。代わりに、[質問者からの説明を必要としない回答を提供する](http://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-c​​an- i-do-代わりに)。 - [レビューの投稿者](レビュー/低品質の投稿/ 11993005) – Alexei

+0

申し訳ありません。 –

関連する問題