Question

我花了很多年时间试图解决这个问题，但我无法......

我有一个数组：clubData。
在该阵列中是一系列对象，代表各个足球俱乐部。
在每个俱乐部对象中，是一个分配给属性squad的数组。

以下是clubData的示例：

[{
        "league": "0",
        "id": "0",
        "name": "AFC Bournemouth",
        "codeName": "afc-bournemouth",
        "nickName": "Cherries",
        "dateFounded": "1899",
        "stadium": "Dean Court",
        "manager": "Eddie Howe",
        "squad": 

        [               
            {"clubCode": "afc-bournemouth",
                "firstName": "Artur",
                "lastName": "Boruc",
                "nationality": "pl",
                "country": "Poland",
                "position": "gk",
                "shirtNumber": "1",
                "age": "36"},

            {"clubCode": "afc-bournemouth",
                "firstName": "Glenn",
                "lastName": "Murray",
                "nationality": "gb-eng",
                "country": "England",
                "position": "fw",
                "shirtNumber": "27",
                "age": "32"}
            ] 

    }, {
        "league": "0",
        "id": "1",
        "name": "Arsenal",
        "codeName": "arsenal",
        "nickName": "Gunners",
        "dateFounded": "1886",
        "stadium": "Emirates Stadium",
        "manager": "Arsène Wenger",
        "squad": [ etc... ]
    }
]

我想在md-card（Angular Material指令）上运行ng-repeat，因此每个squad中的每个对象（玩家）都会重复显示为卡片。

我目前的方法：

我使用了一个外部和内部div与两个单独的ng-repeats。这个问题是它必然会重复外部div，这导致了一个“突破”。在每个外部div重复的末尾，当我只想将内部div重复为单独的单位时。

我的HTML目前看起来像这样：

<span ng-repeat="item in clubData" layout="row" layout-wrap>

    <md-card ng-repeat="player in item.squad" layout="row" layout-wrap>

        <md-card-header>
            <md-card-avatar>
                <div class="clubavatar club-icon-{{player.clubCode}}"></div>
            </md-card-avatar>
            <md-card-header-text>
                <span class="md-title">{{player.firstName + " " + player.lastName}}</span>
                <span class="md-subhead"><span class="flag-icon flag-icon-{{player.nationality}} nationid  md-whiteframe-1dp"></span>{{player.country}}</span>
            </md-card-header-text>
        </md-card-header>

    </md-card>

</span>

我的尝试（和失败）解决方案：

理想情况下，我想在ng-repeat中提出一个表达式，它将迭代元素，但只打印小队数组。

我认为这样的事情可能有效（但事实并非如此）：

<md-card ng-repeat="player in clubData[$index].squad">{{player.name}}</md-card>

逻辑上（对我来说）会打印出来......

<md-card ng-repeat="player in clubData[0].squad">{{player.name}}</md-card>
<md-card ng-repeat="player in clubData[1].squad">{{player.name}}</md-card>
<md-card ng-repeat="player in clubData[2].squad">{{player.name}}</md-card>

也许我误导了$index？

如果我缺少某些东西或其他可行的解决方案，我会非常感谢他人的帮助。

提前致谢。

Answer 1

你在找这样的东西吗？

在您的控制器内

 $scope.players = clubData.reduce(function(a,c){
                      return a.concat(c.squad);
                  },[]);

使用forEach

 $scope.players = [];

  $scope.clubData.forEach(function(c) {
     $scope.players = $scope.players.concat(c.squad);
  });

并在视图上：

<md-card ng-repeat="player in players">{{player.name}}</md-card>

对你的jsfiddle的回应：https://jsfiddle.net/Lt7aP/2342/

使用forEach的解决方案：https://jsfiddle.net/Lt7aP/2344/

解释 - 减少

reduce是高阶函数，在函数式编程中很常见。它采取以下形式......

es6（或者你可以使用babel来获得支持）：

//Will return final value of accumulator!
<array>.reduce(function(accumulator,current){
   //accumulator: accumulated result for each iteration
   //current: current item for given iteration

   //accumulator is empty array or array of players
   //we just concat current's squad array 
   var mergedPlayers = accumulator.concat(current.squad);
   //This return will set accumulator to returned value
   //for next iteration.
   return mergedPlayers;
},
[]  //Default accumulator empty array.
);

您还可以使用lodash，轻微的语法更改

_.reduce(<array>,function(accumulator,current){
 /* your awesome code goes here*/
},[]);

希望这有帮助！

使用ng-repeat访问数组中每个对象的数组属性

我目前的方法：

我的尝试（和失败）解决方案：

1 个答案: