[解決済み] 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
関連
-
[解決済み】Angularjs accordion ng-click on panel-header
-
[解決済み] プリフライト応答が成功しない
-
[解決済み] Angular ng-repeat エラー "リピータ内の重複は許可されません。"
-
[解決済み] ag-gridの行の追加/削除
-
[解決済み] Angular ng-repeatの条件付きラップアイテム(ng-repeatのグループアイテム)。
-
[解決済み] ng-repeat内で$indexを使用して、クラスを有効にしてDIVを表示するにはどうすればよいですか?
-
angularjsのルーティングについて $stateと$stateParamsの話
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] AngularJs .$setPristineでフォームをリセットする
-
[解決済み】角度付きng-repeatの逆再生
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
angularjs ローカルデータストレージ LocalStorage
-
[解決済み] 方法 $state.go()
-
[解決済み] data-ng-file-selectが動作しないのはなぜですか?
-
[解決済み] ag-gridの行の追加/削除
-
[解決済み] シンプルなangularjsの日付入力
-
[解決済み] どのようにangularJSでrouteProviderとlocationProviderを設定するのですか?
-
angularjs統合ueditor入門
-
[解決済み] AngularJs .$setPristineでフォームをリセットする
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み] ng-repeat内のng-click関数にパラメータを追加しても、うまくいかないようです。