web-dev-qa-db-ja.com

Angular ng-repeat groupByおよびKeep order

このフィルターを使用して https://github.com/a8m/angular-filter#groupby のようにデータを並べ替えると、うまく機能します。

<div ng-repeat="(key, value) in tags.tags.objects | groupBy:'category.name' ">

今、私はcategory.orderによって、そのグループの順序を維持しようとしています。

これは可能ですか？

私はそれを次のようにパイピングしてみました：

<div ng-repeat="(key, value) in tags.tags.objects | groupBy:'category.name' | orderBy:'category.order' ">

しかし、違いはありません

javascripthtml5angularjsangularjs-directiveionic-framework
16
Harry

orderByフィルターは、ngRepeat内のオブジェクトでは機能しません。だから、あなたができることは次のようなものです：

<!-- 
     Note: toArray filter also attaches a new property $key
     to the value containing the original key that was used in the object. 
-->

<div ng-repeat="tags in tagsList | groupBy:'prop' | toArray:true | orderBy:'$key'">
  Group name: {{ tags.$key }}
  <p ng-repeat="tag in tags | orderBy:'prop'">
     {{ tag.name }}
  </p>
</div>

参照： toArray filter

18
a8m

groupByは常にng-repeatの最後のものでなければなりません。したがって、orderBy firstとgroupBy lastを設定してから、通常のng-repeatになるように$ indexでトラックを使用できます。

ng-repeat="item in items orderBy:'price' | groupBy:'name' track by $index"

...それが少し遅れるのに役立つことを願っています！

3
Sijan Gurung

Djsizの回答の一部（トラックバイは不要で、パイプがありませんでした）に、これを行うことができます：

<div ng-repeat="(key, value) in tags.tags.objects | orderBy:'category.order' | groupBy:'category.name'">

GroupByはオブジェクトを作成しますが、orderByには配列が必要です...グループ化する前にorderByする場合、適切にソートする必要があります

https://jsfiddle.net/r0m4n/kfho6r26/

2
r0m4n