如何在数组更改时阻止嵌套循环中的内部 ng-repeat 更新答案

【问题标题】：How to stop inner ng-repeat in a nested loop from updating when the array changes如何在数组更改时阻止嵌套循环中的内部 ng-repeat 更新
【发布时间】：2017-04-30 14:54:02
【问题描述】：

所以我有一系列活动，每个活动都有团队参与。这两个对象是相关的，但都不是另一个对象的属性。

我想要做的是循环遍历每个事件并显示参与其中的每个团队。我尝试使用嵌套的 ng-repeats 来做到这一点。我的问题是内部 ng-repeat 仅在外部 ng-repeat 完成执行后才显示。这意味着所有参与处理的最后一个事件的团队都将显示在每个表格中。

在我的控制器中，我有一个团队数组，每次收到新事件时我都会更新该数组，并且每个数组都有一个

这是我的重复表

<div ng-repeat="event in events" ng-init="getTeams(event.eventId)">
    <div class="active title">Teams in {{event.eventName}} #{{event.eventId}}</div>
          <table>
            <thead>
              <tr> 
                <th>Name</th>
                <th>Sport</th>
                <th>Motto</th>
                <th>W-L-D</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="team in teams">
                <td>{{team.teamName}}</td>
                <td>{{team.teamSport}}</td>
                <td>{{team.teamMotto}}</td>
                <td>{{team.win}}- {{team.lose}} - {{team.draw}}</td>
                <td>{{team.teamDescription}}</td>
              </tr>
            </tbody>
          </table>
  </div>

这是我的控制器

(function(){
angular
    .module('foo')
    .controller('EventController', function ($scope, $location, EventService) { 

        $scope.events = [];
        $scope.targetEvent = {};
        $scope.teams = [];

        EventService.getEvents()
        .then(function(events){
            $scope.events = events;
        });

        $scope.getTeams = function(currEventId){
            EventService.getTeams(currEventId)
                .then(function(eventTeams) {
                $scope.teams = eventTeams;
            })
        }
})()

我曾尝试使用 track by，但通过 eventId 或 teamId 进行跟踪似乎不起作用。提前感谢您的帮助

【问题讨论】：

标签： javascript html angularjs arrays

【解决方案1】：

虽然您每次都创建 teams 变量。根据您当前的实现，它对于所有事件都是全局且单一的。我不认为你应该在这里使用ng-init，而是通过循环事件在控制器本身内部执行该操作。

EventService.getEvents().then(function(events){
    $scope.events = events;
    //loop over each event.
    events.forEach(function(event){
        EventService.getTeams(currEventId)
         .then(function(eventTeams) {
            //placed specific teams on event level
            event.teams = eventTeams; 
        })
    })
});

那你只需要把里面的ng-repeat改成下面，去掉ng-init

<tr ng-repeat="team in event.teams">

【讨论】：