具有複雜嵌套數據結構和動態鍵的AngularJS ng-repeat指令

Question

我在使用ng-repeat在angularjs中實現此數據結構時遇到了問題。這可能是我完全使用了錯誤的方法。我所知道的是，我可以用把手，但掙扎在離子複製這樣做精/ angularjs

{ 
    "germany": { 
     "tournaments": { 
      "2. Bundesliga": { 
       "fixtures": [{ 
        "c": "Germany", 
        "id": "1479628", 
        "l": "2. Bundesliga", 
        "h": "Arminia Bielefeld", 
        "hs": "2", 
        "as": "2", 
        "a": "St. Pauli", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 15:23", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }, { 
        "c": "Germany", 
        "id": "1479621", 
        "l": "2. Bundesliga", 
        "h": "FC Cologne", 
        "hs": "0", 
        "as": "1", 
        "a": "Paderborn", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 15:22", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }, { 
        "c": "Germany", 
        "id": "1479627", 
        "l": "2. Bundesliga", 
        "h": "Karlsruhe", 
        "hs": "1", 
        "as": "1", 
        "a": "Ingolstadt", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 15:22", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }] 
      } 
     } 
    }, 
    "england": { 
     "tournaments": { 
      "Premier League": { 
       "fixtures": [{ 
        "c": "England", 
        "id": "1474967", 
        "l": "Premier League", 
        "h": "Tottenham Hotspur", 
        "hs": "1", 
        "as": "0", 
        "a": "Everton", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 16:19", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }, { 
        "c": "England", 
        "id": "1474962", 
        "l": "Premier League", 
        "h": "Manchester United", 
        "hs": "2", 
        "as": "2", 
        "a": "Fulham", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 18:53", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }] 
      } 
     } 
    } 

的想法是遍歷所有的國家，然後是比賽，那麼喜歡的東西就結了燈具這

頭 - 德國
副標題 - 德甲
夾具1 - 美孚VS酒吧
燈具2 - 巴茲VS富
頭 - 英格蘭
副標題 - 超級聯賽

我會騰出大量的json，並將它縮短爲一個小樣本。

到目前爲止，我已經儘可能

<div class="list" ng-repeat="(key, data) in livescores"> 
    <div class="item item-divider"> 
    {{ key}} 
    </div> 
    <div class="item item-divider" ng-repeat="(key, data) in data.tournaments"> 
    {{ key}} 
    </div> 

了，但似乎無法得到它在我的頭腦清醒。

Answer 1

Plunkr http://plnkr.co/edit/yMBnY4YgHZNwyw9vr0AR?p=preview

<div class="country" ng-repeat="(countryIndex, country) in data"> 
     <div>{{countryIndex}}</div> 
     <div class="tourney" ng-repeat="(tournamentName, tournament) in country.tournaments"> 
     <div >{{tournamentName}}</div> 
     <div class="fixtures" ng-repeat="fixtures in tournament.fixtures"> 
      <div ng-repeat="fixture in fixtures"> 
      {{fixture}} 
      </div> 
     </div> 
     </div> 
    </div> 

Answer 2

您必須遍歷每個和功能得到相應的鍵和值：

舉例： Plunkr：http://plnkr.co/edit/D3oPIIEohR3BFvSazR95?p=preview

HTML

<div class="list" ng-repeat="(name, country) in countries"> 
    <div class="item item-divider"> 
     {{ name}} 
    </div> 
    <div class="item item-divider" ng-repeat="(name, tournament) in country.tournaments"> 
     {{ name}} 
     <div class="item item-divider" ng-repeat="fixture in tournament.fixtures"> 
     {{ fixture.h}} vs {{fixture.a}} 

    </div> 
    </div> 
    </div> 

控制器

app.controller('MainCtrl', function($scope) { 
    $scope.countries = { 
    "germany": { 
     "tournaments": { 
      "2. Bundesliga": { 
       "fixtures": [{ 
        "c": "Germany", 
        "id": "1479628", 
        "l": "2. Bundesliga", 
        "h": "Arminia Bielefeld", 
        "hs": "2", 
        "as": "2", 
        "a": "St. Pauli", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 15:23", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }, { 
        "c": "Germany", 
        "id": "1479621", 
        "l": "2. Bundesliga", 
        "h": "FC Cologne", 
        "hs": "0", 
        "as": "1", 
        "a": "Paderborn", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 15:22", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }, { 
        "c": "Germany", 
        "id": "1479627", 
        "l": "2. Bundesliga", 
        "h": "Karlsruhe", 
        "hs": "1", 
        "as": "1", 
        "a": "Ingolstadt", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 15:22", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }] 
      } 
     } 
    }, 
    "england": { 
     "tournaments": { 
      "Premier League": { 
       "fixtures": [{ 
        "c": "England", 
        "id": "1474967", 
        "l": "Premier League", 
        "h": "Tottenham Hotspur", 
        "hs": "1", 
        "as": "0", 
        "a": "Everton", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 16:19", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }, { 
        "c": "England", 
        "id": "1474962", 
        "l": "Premier League", 
        "h": "Manchester United", 
        "hs": "2", 
        "as": "2", 
        "a": "Fulham", 
        "sd": "February 9th 2014", 
        "tt": "GameEnded", 
        "t": "Sunday, February 9, 2014 - 18:53", 
        "st": "finished", 
        "sn": "Finished", 
        "ko": "FT" 
       }] 
      } 
     } 
    } 
    }; 
});