AngularJS:GroupBy和show项目

我有一个应用程序，我在其中检索一些对象的信息（到一个数组中）。该阵列将具有以下结构：

$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'
    }
    ...
]

我想要什么 我希望能有两份清单

左边是一些可定制的GroupingByAngularJS过滤器列表。因此，我可以指定“按玩家分组”，并在左侧列表中显示一个包含一些信息的玩家列表（例如，显示玩家的姓名）

在右侧，当我选择一个特定的玩家时，显示与该玩家关联的项目

我试过的 所以，我得到了整个

项目

对象，但我没有找到任何方法来获得我正在

groupBy

中的项目。因为，现在，如果有3个项目具有

event.id

，我会得到三个

，而不是只有一个项目（

event

对象中的一个）

我的要求 有没有办法使用AngularJS

groupBy

filter并返回指定分组的（整个）对象

请记住，

groupBy

键可以由用户更改

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

---

谢谢大家!

我想我已经通过了自定义过滤器。我不确定这是否是最好的方法，因此如果有人有其他解决方案，请发布它

这是过滤器的代码：

(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>

{{obj.id}

甚至是带有指令的（未经测试，但也应起作用）：

您还可以发布

groupBy

过滤器的代码吗？它不是我制作的过滤器，而是包含在angular.filter模块中。你可以在这里看到：（我想这里有代码：）。非常感谢。我理解你的意思，但是

groupBy

很大程度上依赖于你的数据结构，现在它只是一个对象，没有类似的值来分组或区分。您能否详细介绍一下

Ctrl.items

是什么？应该有更多的数据来处理。。。（更多事件等）完成！问题已更新。如您所见，所有对象都有相同的字段，唯一改变的是子对象的属性，如

事件

，

播放器

，等等。非常感谢。

(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;
        };
    });
})();

<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>