ng-repeat上存在“ng-group”功能？

Question

使用非第三方插件：

我有一个这样的数组：

[
    {groupName:'General', label:'Automatic Updates', type:'select', values:{0:'On', 1:'Off'}},
    {groupName:'General', label:'Restore Defaults', type:'button', values:['Restore']},
    {groupName:'General', label:'Export & Import', type:'button', values:['Export', 'Import']},
    {groupName:'Timing', label:'Double Click Speed', type:'text'},
    {groupName:'Timing', label:'Hold Duration', type:'text'}
]

我想对此重复，但要创建群组。

我希望最终的结果如下：

基本上，ng-repeat上的groupName可以生成两个div容器，然后ng-repeat为每个项目添加行。

这是否可行，而无需将我的数组更改为如下对象：

[
   'General': [...],
   'Timing': [...]
]

Answer 1

如果你想做这样的事情，一个解决方案是将重复分成2个单独的重复。最简单的方法是创建一个过滤掉唯一属性的小帮助文件。像这样的过滤器可以：

function uniqueFilter() {
    return function(arr,property) {
        if (Object.prototype.toString.call( arr ) !== '[object Array]') {
            return arr;
        }
        if (typeof property !=='string') {
            throw new Error('need a property to check for')
        }
        return Object.keys(arr.reduce(isUn,{}));

        function isUn(obj,item) {
            obj[item[property]] = true;
            return obj;
        }
    }
}

该过滤器将返回一个数组，该数组由要分组的属性的唯一值组成。

一旦你有了这个，你可以像这样嵌套几个ngRepeats：

<div ng-repeat="group in vm.data| uniqueFilter:'groupName'">
    {{group}}
    <ul>
        <li ng-repeat="item in vm.data| filter:{groupName:group}">{{item.label}}</li>
    </ul>
</div>

你应该被设定。 没有必要为此举办3人派对。 在行动in this plunk中看到它。