AngularJS - 使用两个对象嵌套 ng-repeat

Question

控制器：

$scope.init = function(team){
    $http.get("/getLeaderByTeamID/"+team.id)
    .success(function (data, status, headers, config) {
        // this is the object that I need to list in the table
        $scope.leader = data;
    })
    .error(function (data, status, header, config) {
        $log.error("Error!");
    });

}

表中的 data-ng-repeat 指令：

<table>
<thead>
    <tr>
        <th>Team</th>
        <th>Leader</th>
    </tr>
</thead>
<tbody>
     <tr data-ng-repeat="team in teams" data-ng-init="init(team)">
        <td>{{team.name}}</td>
        <td data-ng-repeat="l in leader">{{l.name}}</td>
     </tr>
</tbody>    

逻辑如下：

• 列出每个团队后，init() 函数会将对象发送到控制器。
• 另一方面，init() 函数将与 ID 团队进行查询，以获取其各自的领导者。
• 该函数将返回一个对象，第二个 ng-repeat 指令会将其列在其各自的团队对象中。

但正如我所展示的，该列表是错误的，因为每个团队都列出了一个相同的对象。

我想在 init() 函数中为每个对象创建一个数组，但我不知道如何连接每个对象以创建一个数组。

有什么建议吗？

Answer 1

我认为您只是在每个请求中更新 $scope.leader 值，所以最后 $scope.leader 对所有团队都有相同的值。试试这个。

$scope.init = function(teamId){
$http.get("/getLeaderByTeamID/"+teamId)
.success(function (data, status, headers, config) {
    // this is the object that I need to list in the table
    $scope.leader[teamId] = data;
})
.error(function (data, status, header, config) {
    $log.error("Error!");
});



<table>
<thead>
    <tr>
        <th>Team</th>
        <th>Leader</th>
    </tr>
</thead>
<tbody>
     <tr data-ng-repeat="team in teams" data-ng-init="init(team.id)">
        <td>{{team.name}}</td>
        <td data-ng-repeat="l in leader[team.id]">{{l.name}}</td>
     </tr>
</tbody>  

或者您可以在第二个 ng-repeat 中使用函数返回领导者数组，例如：

<td data-ng-repeat="l in getLeader(team.id)">{{l.name}}</td>