Question

我有这样的ng-repeater，如下所示：

<ul>
    <li ng-repeat="item in controller.collections.data | orderBy: '-plannedCollectionDate'">
        {{ item.plannedCollectionDate | date: 'fullDate' }}
    </li>
</ul>

并且这很好，它获取我的数据并反向命令，但是当我使用groupBy过滤器尝试此操作时，将忽略orderBy。我一开始就试着这样做：

<div ng-repeat="(key, value) in controller.collections.data | groupBy: 'plannedCollectionDate' | orderBy: '-plannedCollectionDate'">

    {{ key | date: 'fullDate' }}

    <table class="table table-hover table-light">
        <tbody>
            <tr ng-repeat="collection in value | filter: controller.filter" ng-click="controller.select(collection)" ng-class="{ active: controller.isSelected(collection), warning: collection.status.id === 2, success: collection.status.id === 4, danger: collection.status.id === 5 }">
                <td>
                    <div>{{ collection.supplierName }} {{ collection.description }}</div>
                    <div>to be collected by {{ collection.customerName }}</div>
                </td>
                <td>
                    <a ui-sref=".collect({ selected: [collection]})">{{ collection.status.name }}</a>
                </td>
                <td>
                    <button class="btn btn-danger" ng-click="controller.delete(collection.id)">
                        <span class="fa fa-close"></span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

但它没有用。使用谷歌后，我找到了一个解决方案，建议：

<div ng-repeat="group in controller.collections.data | groupBy: 'plannedCollectionDate' | toArray: true | orderBy: '-plannedCollectionDate'">

    {{ group.$key | date: 'fullDate' }}

    <table class="table table-hover table-light">
        <tbody>
            <tr ng-repeat="collection in group | filter: controller.filter" ng-click="controller.select(collection)" ng-class="{ active: controller.isSelected(collection), warning: collection.status.id === 2, success: collection.status.id === 4, danger: collection.status.id === 5 }">
                <td>
                    <div>{{ collection.supplierName }} {{ collection.description }}</div>
                    <div>to be collected by {{ collection.customerName }}</div>
                </td>
                <td>
                    <a ui-sref=".collect({ selected: [collection]})">{{ collection.status.name }}</a>
                </td>
                <td>
                    <button class="btn btn-danger" ng-click="controller.delete(collection.id)">
                        <span class="fa fa-close"></span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

但这也不起作用。有人可以帮我解决这个问题吗？

Answer 1

angular-filter的用户组已经写了需要做的事情here

示例：groupBy返回一个对象，但orderBy fiter期望array ..使用toArray:true并给orderBy一个数组来处理：< / p>

控制器：

$scope.objectToArray= function(arr) {  
    return $filter('objectToArray')
      ($filter('map')(arr, 'id'));
      }

查看：现在orderBy可以在$scope.objectToArray中使用ng-repeat：

<div ng-repeat="group in controller.collections.data | groupBy: 'plannedCollectionDate' | toArray: true | orderBy: '-objectToArray'">

GL！

AngularJS orderBy不使用groupBy

1 个答案: