AngularJS ng-repeat trên mảng các đối tượng duy nhất

Question

Tôi có một đối tượng với 2 mảng:

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

Mỗi phòng trong số mảng chứa một lượng khác nhau của các đối tượng:

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

Tôi in từng đối tượng vào trang sử dụng danh sách, được phân tách bằng "thể thao":

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

Tôi muốn in từng thông tin đối tượng vào li dưới tên môn thể thao chính xác.

Ví dụ: có tổng cộng 4 đối tượng, bóng đá có 3, khúc côn cầu có 1.

Hiện tại, mỗi mục được lặp lại trong cả hai môn thể thao. Vì vậy, cả hai môn thể thao đều có 4 mục. Làm thế nào tôi có thể sử dụng ng-lặp lại để chỉ thiết bị in nằm dưới tiêu đề thể thao chính xác?

Kết quả sẽ giống như thế:

Soccer

• thiết bị: cleats
• áo: áo
• đội: kho

Hockey

• thiết bị: giày trượt

Answer 1

Sau đây nên làm như lừa:

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

Lưu ý rằng bạn phải làm 3 lần lặp:

• đầu tiên so với đối tượng gốc
• sự thứ hai trên các đối tượng mảng trong mỗi giá trị đối tượng ban đầu
• lần thứ ba các đối tượng bên trong các mảng

Và đây là một phiên bản làm việc dành cho bạn: https://plnkr.co/edit/WKNRU6U6xwGgKRq4chhT?p=preview

Answer 2

Bạn có thể sử dụng key và value trong chỉ thị ng-repeat, như hình dưới đây.

<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 bổ sung:

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

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

tôi đã tạo ra một plunkr here để bạn có thể xem và chỉnh sửa:

Bạn cũng có thể tổ chỉ thị 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>