javascript - 具有复杂嵌套数据结构和动态键的 AngularJS ng-repeat 指令

Question

我在使用 ng-repeat 在 angularjs 中实现此数据结构时遇到问题。可能我完全使用了错误的方法。我所知道的是，我可以使用 Handlebars 做到这一点，但很难在 ionic/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 - Foo 与 Bar
赛程 2 - Baz VS Foo
头球 - 英格兰
副标题 - 英超联赛

我将省去大量的 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>