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

我们的想法是遍历所有国家，然后是锦标赛，然后是固定装置，以这样的方式结束

Header - 德国
副标题 - 德甲
赛程 1 - Foo vs Bar
赛程 2 - Baz vs Foo
Header - 英国
副标题 - 英超联赛

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

您必须为每个迭代并在 features 中获取相应的键和值：

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

Answer 2

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>

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

AngularJS ng-repeat directive with complex nested data structure and dynamic keys

javascript

angularjs

angularjs-ng-repeat

ionic-framework

ng-repeat