Question

我有以下对象，想要创建一个按ParentCategoryID分组的过滤器。

[
{id : 116, Desciption : 'Item1', ParentID : 1, parent : 'Parent1'},
{id : 117, Desciption : 'Item2', ParentID : 2, parent : 'Parent2'},
{id : 118, Desciption : 'Item3', ParentID : 2, parent : 'Parent2'},
{id : 119, Desciption : 'Item4', ParentID : 1, parent : 'Parent1'}
]

所以结果将是

Parent1
  Item1
  Item4
Parent2
  Item2
  Item3

我的过滤器目前看起来像这样：

productDetailsApp.filter('groupBy', function() {
    return function(list, group_by) {       
        var filtered = [];
        var prev_item = null;

        angular.forEach(list, function(item) {
            if (prev_item !== null) {
                if (prev_item[group_by] === item[group_by]) {
                    filtered.push(item);
                } 
            }

            prev_item = item;
        });

        console.log(filtered);
        return filtered;
    };

});

和html：

 <div data-ng-repeat="d in details | groupBy:'ParentID'">
            <h2 >{{d.parent}}</h2>           
            <li>{{d.Desciption}}</li>
  </div>

但是这个输出只输出最后一个元素，因为第一个项目的prev_item总是为null：

Parent1
  Item4
Parent2
  Item3

请有人帮助我。

Answer 1

从语义上讲，重新安排数据会更有意义。就像这样。

[
    {
        id: 1,
        title: 'Parent 1',
        items: [
            {id: 126, description: 'Item 1'},
            {....}
        ]
    }
]

然后使用嵌套重复。这种数据结构更准确地描述了实际情况，并将使您的生活更轻松。如果重新安排数据不是一个选项，或者你不理解嵌套的ng-repeats让我知道，我们可以找到替代方案。

AngularJs按数据和显示使用过滤器分组

1 个答案: