如何一次使用angular groupBy和orderBy

时间:2015-06-08 10:53:12

标签: javascript php angularjs

我是棱角分明的新手。 问题:我一年有多张专辑。我在专辑视图中使用手风琴。我使用简单的查询相册,没有任何分组和顺序。现在angularjs groupBy工作正常。这是多年的分组,但我希望年份处于DESC顺序,而不是使用angularjs orderBy。 我也试过这个solution 但无济于事。

代码:

<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"}]

欢迎任何帮助/建议。

3 个答案:

答案 0 :(得分:1)

您可以使用以下内容:

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

(您可以使用任何想要订购的房产)

这应该可以解决问题。

答案 1 :(得分:0)

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>

答案 2 :(得分:0)

您可以使用下划线库的_.sortBy()和_.groupBy函数

underscore.js