web-dev-qa-db-ja.com

Angular要素内のng-repeat条件付きラップアイテム（ng-repeatのグループアイテム）

条件を使用してng-repeatのアイテムをグループ化しようとしています。

条件の例は、すべての要素を同じ時間にグループ化することです。

データ：

[
    {name: 'AAA', time: '12:05'},
    {name: 'BBB', time: '12:10'},
    {name: 'CCC', time: '13:20'},
    {name: 'DDD', time: '13:30'},
    {name: 'EEE', time: '13:40'},
    ...
]

「時間」フィールドは実際にはタイムスタンプ（1399372207）ですが、正確な時間を使用すると、出力例の理解が容易になります。

私はng-repeatを使用してこれらのアイテムをリストしています：

<div ng-repeat="r in data| orderBy:sort:direction">
   <p>{{r.name}}</p>
</div>

また試してみました：

<div ng-repeat-start="r in data| orderBy:sort:direction"></div>
    <p>{{r.name}}</p>
<div ng-repeat-end></div>

有効な出力は次のとおりです。

<div class="group-class">
    <div><p>AAA</p></div>
    <div><p>BBB</p></div>
</div>
<div class="group-class">
    <div><p>CCC</p></div>
    <div><p>DDD</p></div>
    <div><p>EEE</p></div>
</div>

問題の簡単な解決策がない場合の最後のオプションは、データをグループ化し、ng-repeatで使用されるスコープ変数に割り当てることです。

何かご意見は？

angularjsangularjs-ng-repeatng-repeat
54
Catalin MUNTEANU

angular.filter モジュールのgroupByフィルターを使用できます。
したがって、次のようなことができます。

usage：collection | groupBy:property
ネストされたプロパティをドット表記で使用：property.nested_property
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>

結果：
グループ名：アルファ
*プレーヤー：ジーン
グループ名：ベータ
*プレーヤー：ジョージ
*プレーヤー：ポーラ
グループ名：ガンマ
*プレーヤー：スティーブ
*プレーヤー：スクルース

UPDATE：jsbin

145
a8m

Controllerで最初にグループを作成します。

 $scope.getGroups = function () {
    var groupArray = [];
    angular.forEach($scope.data, function (item, idx) {
        if (groupArray.indexOf(parseInt(item.time)) == -1) {
            groupArray.Push(parseInt(item.time));
        }
    });
    return groupArray.sort();
};

次に、フィルターを作成します。

 myApp.filter('groupby', function(){
    return function(items,group){       
       return items.filter(function(element, index, array) {
        return parseInt(element.time)==group;
       });        
    }        
 }) ;

次に、テンプレートを変更します。

 <div ng-repeat='group in getGroups()'>
     <div ng-repeat="r in data | groupby:group" class="group-class">
         <div><p>{{r.name}}</p></div>
     </div>
 </div>

参照してください DEMO

18
Nitish Kumar

単純なHTML静的グループのソリューション。

<ul>
  Group name: Football
  <li ng-repeat="player in players" ng-if="player.group == 'football'">
    Player Name: {{ player.name }} 
  </li>
  Group name: Basketball
  <li ng-repeat="player in players" ng-if="player.group == 'basketball'">
    Player Name: {{ player.name }} 
  </li>
</ul>

出力：

グループ名：サッカー
-プレイヤー名：Nikodem
-プレイヤー名：ランバート
グループ名：バスケットボール
-プレイヤー名：ジョン
-プレイヤー名：Izaäk
-プレイヤー名：ディオニシア

0
empax