我有一个应用程序，用于检索某些对象的信息（数组）。 该数组将具有以下结构：
$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'}我问什么
有没有使用AngularJS groupBy过滤器并获取指定分组的（整个）对象的方法？
请记住， groupBy键可以由用户更改。
如果您需要更多信息，请告诉我。
谢谢！
I've got an application where I retreive the information of some objects (into an array). That array would have the following structure:
$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' } ... ]What I'd like
I'd like to be able to have two lists.
On the left, a list of some customizable groupingBy AngularJS filter. So, I can specify "group it by player" and it shows, on this left list, a list of the players with some information (for example, showing the player's name).
On the right, when I select a specific player, show the items that have this player associated.
What I've tried
<li data-ng-repeat="(key, value) in Ctrl.items | groupBy: 'event.id'"> {{key}}<br/>{{value}} </li>What I get
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'}What I ask
Is there any way of using AngularJS groupBy filter and getting in return the (whole) object that is specifying the grouping?
Remember that the groupBy key can be changed by the user.
If you need any further information, please let me know.
Thank you!
最满意答案
我想我已经通过一个自定义过滤器。 我不确定这是否是最好的方式，所以如果有人有另一种解决方案，请发布！
这是过滤器的代码 ：
(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>I think I've made it through a custom filter. I'm not sure if it's the best way, so if anyone has another solution, please post it!
This is the code of the filter:
(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; }; }); })();This will return the whole object. So our HTML would be something like:
<ul> <li data-ng-repeat="(key, obj) in Ctrl.items | groupByGrouped: 'event'"> <span class="object_id">{{obj.id}}</span> </li> </ul>Or even with a directive (not tested, but should work aswell):
<ul> <li data-ng-repeat="(key, obj) in Ctrl.items | groupByGrouped: 'event'"> <obj_directive ourobject="obj"></obj_directive> </li> </ul>更多推荐
发布评论