Question

我有一个JSON数组，我需要按日期分组。所以使用角度滤镜我创建了这个：

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

    Group name: {{ key | date: 'fullDate' }}

    <li ng-repeat="item in value">
        item: {{ item }}
    </li>
</ul>

这很好，但我实际想要生成的是一个表。我试过这个：

<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>

再次正常工作，但它为每个组生成一个表。我更喜欢的是有一个表格，其中包含 groupBy 日期的标题，然后是内部重复的标题。我想我必须做一些像 ng-repeat-start 这样的事情，但我无法让它发挥作用。

有谁知道如何做我需要的事情？

Answer 1

实际上这并不难理解。我只是改变了我对标题的思考方式。

这是我的解决方案：

<table class="table table-hover table-light">
    <tbody ng-repeat="group in controller.collections.data | groupBy: 'plannedCollectionDate' | toArray: true | orderBy: '-plannedCollectionDate'">
        <tr>
            <th colspan="3">
                {{ group.$key | date: 'fullDate' }}
            </th>
        </tr>

        <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>

AngularJS ng-repeat按日期格式化问题

1 个答案: