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

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

本文关键字：嵌套数据结构动态复杂 repeat ng 指令 AngularJS 更新时间：2024-05-12

我在angularjs中使用ng repeat实现此数据结构时遇到问题。可能是我完全用错了方法。我所知道的是，我可以用车把做得很好，但很难在离子/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>

但我似乎无法在脑海中理清。

Plunkrhttp://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>

您必须对每个功能进行迭代，并且在功能中获得相应的密钥和值：

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