9

如果有一个按日期排序的带有日期字段的项目列表。我想按日期对这些项目进行分组，例如；

日期1

  • 项目1

日期2

  • 项目2
  • 第 3 项

等等……

我有的是这个；

<ul>
    <li ng-repeat="listing in listings | filter:query">
        <h1 ng-show="$index === 0 || listings[$index - 1].created !== listing.created">
            {{listing.created | date:mediumDate}}
        </h1>
        {{listing.title}}
    </li>
</ul>

但是这种方式 h1 元素成为 li 元素的子元素，这会弄乱表示。还有其他方法可以按照我想要的方式编写这个 ng-repeat 吗？

4

2 回答 2

3

根据您列表中的项目数量，我有一个可能不起作用的解决方案。

我的想法是应用过滤器将简单列表转换为分层列表。

这是一个有效的 jsFiddle。 （看底部的新的，真的！）

这个想法很简单，获取一个现有的列表，并在运行中重新排列它：

<div ng-repeat="g in items | groupBy:'group' | orderBy:'group'">
    <h2>{{g.group}}</h2>
    <ul>
        <li ng-repeat="item in g.items | orderBy:'title'">{{item.id}}. {{item.title}}</li>
    </ul>
</div>

在这种情况下，我们采用了原始数组，并对其应用了groupBy过滤器。这个过滤器实际上有点复杂，因为它需要确保它不会对数组进行不必要的修改，因此它必须存储原始数组的深层副本以进行比较。如果删除该深层副本和检查，则$digest每次都会出现迭代错误。

编辑：请参阅底部以获取执行数组较浅副本的修改版本

这是过滤器代码：

app.filter("groupBy", function() {
    var mArr = null,
        mGroupBy = null,
        mRetArr = null;
    return function(arr, groupBy) {
        if(!angular.equals(mArr, arr) || mGroupBy !== groupBy) {
            mArr = angular.copy(arr);
            mGroupBy = groupBy;
            mRetArr = [];
            var groups = {};
            angular.forEach(arr, function(item) {
                var groupValue = item[groupBy]
                if(groups[groupValue]) {
                    groups[groupValue].items.push(item);
                } else {
                    groups[groupValue] = {
                        items: [item]
                    };
                    groups[groupValue][groupBy] = groupValue;
                    mRetArr.push(groups[groupValue]);
                }
            });
        }
        return mRetArr;
    };
});

（mArr、mGroupBy和mRetArr是“记忆”值，在这里。）

这个过滤器的好处是它不需要数据已经分组。上面链接的 jsFiddle 包含一个按钮，用于在末尾动态地将项目添加到数组中，但它们最终仍会分组。

同样，真正需要注意的是，根据您列表中的项目数量，它可能会很慢和/或很昂贵。数百个中等复杂的项目应该没问题，但如果你有数千个，你应该在它们到达范围之前将它们预先排序到其他地方。

编辑：更好的版本

以增加代码复杂度为代价，我修改了过滤器，只复制关键信息，而不是深度复制整个数组。这一次，我制作了包含项目的组的哈希图。这些项目仍然被引用，但这次是显式引用，因此修改树中的项目不会强制使用手段，但更改项目的组或添加或删除项目会。

新小提琴：http: //jsfiddle.net/hhWaX/2/

这是新的过滤器：

app.filter("groupBy", function() {
    var mArr = null,
        mGroupBy = null,
        mRetArr = null,
        getMemoArr = function(arr, groupBy) {
            var ret = {};
            angular.forEach(arr, function(item){
                var groupValue = item[groupBy];
                if(ret[groupValue]) {
                    ret[groupValue].push(item);
                } else {
                    ret[groupValue] = [item];
                }
            });
            return ret;
        };
    return function(arr, groupBy) {
        var newMemoArr = getMemoArr(arr, groupBy);
        if(mGroupBy !== groupBy || !angular.equals(mArr, newMemoArr)) {
            mArr = newMemoArr;
            mGroupBy = groupBy;
            mRetArr = [];
            var groups = {};
            angular.forEach(arr, function(item) {
                var groupValue = item[groupBy]
                if(groups[groupValue]) {
                    groups[groupValue].items.push(item);
                } else {
                    groups[groupValue] = {
                        items: [item]
                    };
                    groups[groupValue][groupBy] = groupValue;
                    mRetArr.push(groups[groupValue]);
                }
            });
        }
        return mRetArr;
    };
});

它要复杂得多，但是这个应该比大型集合具有更好的性能，因为原始数组的重复绝对最少。

于 2013-07-16T07:31:47.837 回答
2 
<li class="divider" ng-if="FormsList[$index].FORM_GROUP!=FormsList[$index-1].FORM_GROUP">

非常适合我。像这样

<input type="text" class="form-control" placeholder="Search Form..." ng-model="selectedForm">

<ul class="nav nav-pills nav-stacked" role="menu" ng-repeat="Form in FormsList | filter:selectedForm">
    <li class="divider" ng-if="FormsList[$index].FORM_GROUP!=FormsList[$index-1].FORM_GROUP">{{Form.FORM_GROUP}}</li>
    <li><a href="#" ng-click="LoadPDF(Form.LOCATION)">{{Form.LINK}}</a></li>
</ul>
于 2016-09-21T05:56:56.140 回答