組對象的AngularJS

Question

陣列基於陣列看起來像這樣的：

var members = [ 
    {name: "john", team: 1}, 
    {name: "kevin", team: 1}, 
    {name: "rob", team: 2}, 
    {name: "matt", team: 2}, 
    {name: "clint", team: 3}, 
    {name: "will", team: 3} 
]; 

我需要爲每個團隊的無序列表。

可以用ngRepeat直接完成，也可以使用過濾器嗎？

或者更容易將數組重組爲一組成員隊列的數組？

var teams = [ 
    {id: 1, members: ["john", "kevin"]}, 
    {id: 2, members: ["rob", "matt"]}, 
    {id: 3, members: ["clint", "will"]} 
] 

嵌套的ngRepeat很容易實現，但是如何以簡單/聰明的方式從第一個數組到第一個數組？

注意：數組不是來自數據庫，而是來自html表。所以這只是一個平坦的成員名單。

function MyController() { 
 
    this.members = [ 
 
    {name: "john", team: 1}, 
 
    {name: "kevin", team: 1}, 
 
    {name: "rob", team: 2}, 
 
    {name: "matt", team: 2}, 
 
    {name: "clint", team: 3}, 
 
    {name: "will", team: 3} 
 
    ]; 
 
} 
 

 
angular.module('app', []); 
 
angular.module('app') 
 
    .controller('MyController', MyController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MyController as ctrl"> 
 
    <ul> 
 
     <li ng-repeat="member in ctrl.members">{{ member.name }} - {{ member.team }}</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

你必須group項目。對於這一點，我使用，以便reduce方法來創建 一個hash收集它看起來像這樣：

{ 
    "1": [ 
    "john", 
    "kevin" 
    ], 
    "2": [ 
    "rob", 
    "matt" 
    ], 
    "3": [ 
    "clint", 
     "will" 
    ] 
} 

的減少（）方法應用於對一個儲液器的功能和陣列中的每個 元件（左向右）將其減少到單個值 。

以下步驟是map這個集合在array。爲此，您應該使用map方法。

的地圖（）方法創建調用此陣列中的每個元件上的 提供的函數的結果的新的數組。

var members = [ 
 
    {name: "john", team: 1}, 
 
    {name: "kevin", team: 1}, 
 
    {name: "rob", team: 2}, 
 
    {name: "matt", team: 2}, 
 
    {name: "clint", team: 3}, 
 
    {name: "will", team: 3} 
 
]; 
 
var groups = members.reduce(function(obj,item){ 
 
    obj[item.team] = obj[item.team] || []; 
 
    obj[item.team].push(item.name); 
 
    return obj; 
 
}, {}); 
 
var myArray = Object.keys(groups).map(function(key){ 
 
    return {team: key, name: groups[key]}; 
 
}); 
 
console.log(myArray);

Answer 2

如果使用underscore.js，那麼你可以團隊的基礎上，使用_.groupBy（）方法來記錄組陣列。

function MyController() { 
    this.members = [ 
    {name: "john", team: 1}, 
    {name: "kevin", team: 1}, 
    {name: "rob", team: 2}, 
    {name: "matt", team: 2}, 
    {name: "clint", team: 3}, 
    {name: "will", team: 3} 
    ]; 

var grouped = _.groupBy(this.members, function(member) { 
    return member.team; 
}); 
} 

Answer 3

您可以使用GROUPBY過濾器這樣

<ul ng-repeat="(key, value) in members | orderBy: 'team' | groupBy:ourGrouper"> 
     <li>{{key}} 
     <ul> 
      <li ng-repeat="mem in value | orderBy: 'name'"> 
      {{mem.name}} 
      </li> 
     </ul> 
     </li> 
    </ul> 

看到這個FIDDLE

Answer 4

擴大在@亞歷-約努茨米哈伊的回答，（只是爲了體驗reduce功能是多麼強大）..這裏是一個reduce，而無需map它再次實現一樣的東西。:)

var members = [ 
 
    {name: "john", team: 1}, 
 
    {name: "kevin", team: 1}, 
 
    {name: "rob", team: 2}, 
 
    {name: "matt", team: 2}, 
 
    {name: "clint", team: 3}, 
 
    {name: "will", team: 3} 
 
]; 
 
/*var teams = [ 
 
    {id: 1, members: ["john", "kevin"]}, 
 
    {id: 2, members: ["rob", "matt"]}, 
 
    {id: 3, members: ["clint", "will"]} 
 
]*/ 
 
var group_to_values = members.reduce(function(arr, item){ 
 
    arr[item.team - 1] = arr[item.team - 1] || { id: item.team, members: []}; 
 
    arr[item.team - 1].members.push(item.name); 
 
    return arr; 
 
}, []); 
 

 
console.log(group_to_values);