angularjs - ng-Repeat ng-show 如果前一个项目字段值不同

Question

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

日期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 吗？

Answer 1

我有一个解决方案，该解决方案可能不起作用，具体取决于列表中的项目数量。

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

这是 working 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 迭代错误。

Edit: See bottom for a modified version that performs shallower copies of the array

这是过滤器代码:

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 包含一个按钮，用于在末尾动态地将项目添加到数组中，但它们最终仍会按组排序。

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

<小时/>

编辑:更好的版本

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

新 fiddle :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;
    };
});

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