javascript - 使用 angularjs 过滤器和 _.groupBy

Question

这是我为重现问题而创建的一个简单示例。在我的 Controller 中，我有一群人:

$scope.people = [
    { name: 'fred', age: 20 },
    { name: 'bob', age: 22 },
    { name: 'jane', age: 24 },
    { name: 'mary', age: 22 },
    { name: 'ben', age: 24 },
    { name: 'sarah', age: 21 },
];

我定义了一个过滤器:

.filter('grouped', function () {
    return function (input) {
        return _.groupBy(input, 'age');
    }
})

您可能会注意到我正在使用 Lo-Dash 进行分组。

在我看来，我定义了一个列表:

<div class="list" ng-repeat="personGroup in people | grouped">
    {{ $index }}
    <div class="list" ng-repeat="person in personGroup">
        {{ person.name }}
    </div>
</div>

我得到了想要的结果，但我的开发者控制台中出现了一堆错误。

https://docs.angularjs.org/error/$rootScope/infdig?p0=10

我明白为什么会出现错误。这在上面的链接中有详细解释。我只是不知道实现我想要的结果的正确方法。

Answer 1

当您在对人员进行分组时创建新的数组对象时，我根本不会使用过滤器。最简单的解决方案是在 Controller 内进行分组:

...
$scope.groups = _.groupBy($scope.people, 'age');
...

您的 ng-repeat 属性将如下所示:

ng-repeat="personGroup in groups"