如何同时使用angular groupBy和orderBy - how to use angular groupBy and orderBy at a time

how to use angular groupBy and orderBy at a time

本文关键字：groupBy orderBy angular 何同时 | 更新日期: 2023-09-26

我是angular js新手。问题:我每年都有很多专辑。我使用手风琴的相册视图。我使用简单的专辑查询，没有任何分组和排序。现在angularjs的groupBy工作得很好。它对多个年份进行了分组，但我希望年份按DESC顺序，这在angularjs的orderBy中行不通。我也尝试过这个解决方案但无济于事。

代码:

<ion-list>
            <div ng-repeat="(key, value) in message | groupBy: 'year'">
              <ion-item class="item-stable"
                        ng-click="toggleGroup({{key}})"
                        ng-class="{active: isGroupShown({{key}})}">
                    <i class="icon" ng-class="isGroupShown({{key}}) ? 'ion-minus' : 'ion-plus'"></i>
                    &nbsp;
                    {{key}}
              </ion-item>
              <ion-item class="item-accordion last-item"
                        ng-show="isGroupShown({{key}})">
                    <div class="col col-50"
                            ng-repeat="gall in value">
                        <a href="#/albums/{{gall.year}}/{{gall.album_alias}}">
                            <ion-item ng-if="gall.cover_image != ''">
                                <img src="{{baseUrl}}{{gall.cover_image}}"/>
                            </ion-item>
                            <div class="caption">{{gall.album_name}}</div>
                        </a>
                   </div>
              </ion-item>
            </div>
        </ion-list>

php中的JSON数据:

[{"album_name":"test album","album_alias":"test-album","year":"2010","cover_image":"upload'/images'/gallery'/2010'/test'/Chrysanthemum.jpg"},{"album_name":"Orientation of BBA & BBIS 2010-2014","album_alias":"orientation-of-bba-bbis-2010-2014","year":"2010","cover_image":"upload'/images'/gallery'/2010'/Orientation%20of%20BBA%20%26%20BBIS%202010-2014'/IMG_5370.jpg"},{"album_name":"Corporate Orientation of BBA & BBIS 2010-2014","album_alias":"corporate-orientation-of-bba-bbis-2010-2014","year":"2010","cover_image":"upload'/images'/gallery'/2010'/Corporate%20Orientation%20of%20BBA%20%26%20BBIS%202010-2014'/IMG_5656.JPG"},{"album_name":"Convocation of BBA & BBIS 2005-2009","album_alias":"convocation-of-bba-bbis-2005-2009","year":"2009","cover_image":"upload'/images'/gallery'/2009'/Convocation%20of%20BBA%20%26%20BBIS%202005-2009'/IMG_3191.jpg"}]

您可以使用以下命令:

<div ng-repeat="message in messages | groupBy: 'year' | orderBy: 'year'"></div>

(您可以使用您想要排序的任何属性)

orderBy filter not work with objects in ngRepeat. You have to use toArray.

        <ion-list>
                        <div ng-repeat="(key, value) in message | groupBy: 'year' |  toArray:true | orderBy:min">
                          <ion-item class="item-stable"
                                    ng-click="toggleGroup({{key}})"
                                    ng-class="{active: isGroupShown({{key}})}">
                                <i class="icon" ng-class="isGroupShown({{key}}) ? 'ion-minus' : 'ion-plus'"></i>
                                &nbsp;
                                {{key}}
                          </ion-item>
                          <ion-item class="item-accordion last-item"
                                    ng-show="isGroupShown({{key}})">
                                <div class="col col-50"
                                        ng-repeat="gall in value">
                                    <a href="#/albums/{{gall.year}}/{{gall.album_alias}}">
                                        <ion-item ng-if="gall.cover_image != ''">
                                            <img src="{{baseUrl}}{{gall.cover_image}}"/>
                                        </ion-item>
                                        <div class="caption">{{gall.album_name}}</div>
                                    </a>
                               </div>
                          </ion-item>
                        </div>
                    </ion-list>

您可以使用_. sortby()和_。下划线库

的groupBy函数

underscore.js