javascript - 如何在 ng-repeat Angular 中使用两个列表

Question

我正在使用很棒的框架 Angular JS。我面临一个小问题。

我正在使用两个列表，我不确定我们是否可以做类似的事情

ng-repeat ="player1 in team1 | orderBy:'id'"

然后

<h3>{{player1.name}} - {{player2.name}}</h3>

我的 json 看起来像:

{
"team1":[
{
"name":"player1T1",
"id":"1",
"role":"goalkeeper"
},
{
"name":"player2T1",
"id":"3",
"role":"attacker"
},
  {
"name":"player3T1",
"id":"2",
"role":"midfielder"
},

],
"team2":[

{
"name":"player2T2",
"id":"3",
"role":"attacker"
},
  {
"name":"player3T2",
"id":"2",
"role":"midfielder"
},
{
"name":"player1T2",
"id":"1",
"role":"goalkeeper"
}
]
}

我想展示类似的东西:

Player1T1 (goalkeeper) - Player1T2 (goalkeeper) 
Player2T1 (attacker)   - Player2T2 (attacker)
Player3T1 (midfielder) - Player3T2 (midfielder)

感谢您给我第一个问题的答案，同时我也使用 order 来排序第二个团队。

Answer 1

由于您不是一对一地进行，而是成对进行，所以这会起作用:

<h3>{{team1[$index].name}} - {{team2[$index].name}}</h3>

并且由于每个团队中的玩家数量相同，因此单个 ng-repeat 将起作用(只是为了获取 $index):

ng-repeat ="player1 in team1"

<小时/>

在这里查看:

angular.module('app', [])
.controller('Ctrl', function($scope) {
  $scope.teams = {
    "team1": [{
      "name": "player1",
      "id": "1"
    }, {
      "name": "player2",
      "id": "2"
    }],
    "team2": [{
      "name": "player4",
      "id": "4"
    }, {
      "name": "player3",
      "id": "3"
    }]
  }
  
  function sortById(a,b){return a.id > b.id}
  
  $scope.teams.team1.sort(sortById);
  $scope.teams.team2.sort(sortById);
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <div ng-repeat="x in teams.team1">
    <h3>{{teams.team1[$index].name}} - {{teams.team2[$index].name}}</h3>
  </div>
</div>