1. ホーム
  2. angularjs

[解決済み] Angular ng-repeatの条件付きラップアイテム(ng-repeatのグループアイテム)。

2022-02-12 15:06:26

質問

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'},
    ...
]

time'フィールドは実際にはタイムスタンプ(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で使用するスコープ変数に割り当てることです。

何かご意見はありますか?

解決方法は?

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

の使い方を説明します。 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>

RESULT:
グループ名:α
* プレイヤー ジーン
グループ名:β
* プレイヤー ジョージ
* プレイヤー ポーラ
グループ名:γ
* プレイヤー スティーブ
* プレイヤー スクルース

UPDATE jsbin