AngularJS NG-重複以上的對象的陣列唯一地

Question

我有2個陣列的對象：

mainObject = { 
    soccer: [], 
    hockey: [] 
} 

每個陣列包含不同量的對象：

sportObject = { 
    soccer: [{equipment: "cleats"}, {shirt: "jersey"}, {team: "arsenal"}], 
    hockey: [{equipment: "skates"}] 
} 

我打印每個對象到使用列表的頁面，通過「運動」分隔：

<ul ng-repeat="(sport, value) in sportObject"> 
    <li>{{sport}}</li> // Prints "soccer" or "hockey" 

    <li ng-repeat="item in sportObject"></li> // <-- one of my failed attempts 
</ul> 

我想每個對象信息的打印到li下正確的體育名稱。

例如，存在總共4個對象是，足球有3個，曲棍球具有1

目前，每個項被這兩種運動下重複。所以這兩項運動都有4項。如何使用ng-repeat打印屬於正確運動標題的設備？

結果應該是這樣的：

足球

• 設備：夾板
• 襯衫：球衣
• 球隊：阿森納

曲棍球

• 設備：溜冰鞋

Answer 1

下應該做的伎倆：

<ul ng-repeat="(sport, value) in sportObject"> 
    <li>{{sport}} 
    <ul> 
     <li ng-repeat="detail in value"> 
     <span ng-repeat="(detailkey, detailvalue) in detail"> 
      {{detailkey}} - {{detailvalue}} 
     </span> 
     </li> 
    </ul> 
    </li> 
</ul> 

請注意，你必須做3次迭代：

• 第一在原來的對象
• 的第二個遍歷每個原始對象值中的數組對象
• 第三個該陣列

在這裏，裏面的對象是一個工作版本供您：https://plnkr.co/edit/WKNRU6U6xwGgKRq4chhT?p=preview

Answer 2

您可以在ng-repeat指令中使用key和value，如下圖所示。

<ul ng-controller="SportController"> 
    <strong>Soccer</strong> 
    <li ng-repeat="(key,value) in sportObject.soccer"> 
    {{value}} 
    </li> 

    <strong>Hockey</strong> 
    <li ng-repeat="(key,value) in sportObject.hockey"> 
    {{value}} 
    </li> 
</ul> 

附加wireup：

var app = angular.module("sportApp", []); 

app.controller("SportController", function($scope) { 
    $scope.sportObject = { 
    soccer: [{equipment: "cleats"}, {shirt: "jersey"}, {team: "arsenal"}], 
    hockey: [{equipment: "skates"}] 
    } 
}); 

我創建了一個plunkr here供您查看和編輯：

還可以嵌套的ng-repeat指令。

<ul ng-controller="SportController"> 
    <li ng-repeat="(sportName, sportValue) in sportObject"> 
    {{sportName}} 
    <ul ng-repeat="(key, val) in sportValue"> 
     <li>{{val}}</li> 
    </ul> 
    </li> 
</ul>