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

Question

我无法使用 ng-repeat 在 angularjs 中实现此数据结构。可能是我完全使用了错误的方法。我所知道的是，我可以使用车把做到这一点，但很难在 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 vs 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>

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"
                }]
            }
        }
    }
    };
});