Question

我有一个应用程序，我可以检索某些对象的信息（进入数组）。该数组将具有以下结构：

$scope.items = [    
    {
        id: 23289323,
        event: {
            id: 972823,
            name: 'Event A name',
            datetime: '2017-02-01 13:45',
        },
        player: {
            id: 58392,
            name: 'Player A name'
        },
        team: {
            id: 38839,
            name: 'Team A'
        },
        datetime: '2017-02-03 22:23'
    },
    {
        id: 482273784,
        event: {
            id: 972823,
            name: 'Event A name',
            datetime: '2017-02-01 13:45',
        },
        player: {
            id: 2989273,
            name: 'Player B name'
        },
        team: {
            id: 2323434,
            name: 'Team B'
        },
        datetime: '2017-02-03 22:23'
    },
    {
        id: 283273939,
        event: {
            id: 23092803,
            name: 'Event B name',
            datetime: '2017-02-01 13:45',
        },
        player: {
            id: 58392,
            name: 'Player A name'
        },
        team: {
            id: 38839,
            name: 'Team A'
        },
        datetime: '2017-02-03 22:23'
    }
    ...
]

我想要什么

我希望能够有两个名单。

在左侧，列出了一些可自定义的groupingBy AngularJS过滤器。所以，我可以指定“按玩家分组”，并在左侧列表中显示包含一些信息的玩家列表（例如，显示玩家的名字）。

在右侧，当我选择特定的玩家时，显示与此玩家相关联的项目。

我尝试了什么

<li data-ng-repeat="(key, value) in Ctrl.items | groupBy: 'event.id'">
{{key}}<br/>{{value}}
</li>

我得到了什么

23289323
{id: 23289323,event: {id: 972823,name: 'Event name',datetime: '2017-02-01 13:45',}, player: {id: 58392, name: 'Player name'}, team: { id: 38839,name: 'Team A'}, datetime: '2017-02-03 22:23'}

所以，我得到了整个item对象，但是我找不到任何方法来获取我groupBy的项目。因为，现在，如果有event.id的3个项目，我会得到三个<li></li>而不是一个event对象中的一个。

我问的是什么

有没有办法使用AngularJS groupBy过滤器并返回指定分组的（整个）对象？

请记住，用户可以更改groupBy密钥。

如果您需要任何进一步的信息，请告诉我。

谢谢！

Answer 1

我想我已通过自定义过滤器制作了它。我不确定它是否是最佳方式，所以如果有人有其他解决方案，请发布！

这是过滤器的代码：

(function(){
    angular.module("AppModule").filter('groupByGrouped', function() {
        return function(list, groupedElement) {
            var result = [];
            var used_elements = [];
            var ref_item;
            var ref_check;

            // Loop through every list item
            angular.forEach(list, function(item){
                // We take the object we want to group by inside the item 
                ref_item = item[groupedElement];

                // If it exists
                if(ref_item !== undefined){
                    if(ref_item.id !== undefined){
                        // If it has an ID, we take the ID to make it faster. 
                        ref_check = ref_item.id;
                    }else{
                        // Otherwise, we identify the specific object by JSON string (slower method)
                        ref_check = JSON.stringify(ref_item);
                    } 

                    // If it does not exist yet
                    if(used_elements.indexOf(ref_check) == -1){
                        // We add it to the results
                        result.push(ref_item);
                        // And we add it to the already used elements so we don't add it twice
                        used_elements.push(ref_check);
                    }
                }else{
                    // Otherwise we log it into our console
                    console.warn("The key '"+groupedElement+"' inside the specified item in this list, does not exist.");
                }
            });

            return result;
        };
    });
})();

这将返回整个对象。所以我们的HTML 会是这样的：

<ul>
    <li data-ng-repeat="(key, obj) in Ctrl.items | groupByGrouped: 'event'">
        <span class="object_id">{{obj.id}}</span>
    </li>
</ul>

甚至带指令（未经过测试，但也应该有效）：

<ul>
    <li data-ng-repeat="(key, obj) in Ctrl.items | groupByGrouped: 'event'">
        <obj_directive ourobject="obj"></obj_directive>
    </li>
</ul>

AngularJS：GroupBy并显示项目

我想要什么

我尝试了什么

我得到了什么

我问的是什么

1 个答案: