angularJS Rails应用程序，通过数组发出问题

Question

这可能是一个简单的问题，但我一直盯着这段代码并尝试不同的变化，但我似乎无法解决它。

我正在循环一个由游戏中的玩家组成的JSON哈希。每个玩家可以是普通玩家或后备玩家。然而问题在于当前的用户播放器。我需要在ng-repeat中找到当前游戏的当前玩家（这没有问题），然后将他/她设置为后备玩家或普通玩家。那就是问题所在。我有一个if和else语句，可以找出当前用户是否保留，然后我将boolean game.current_user.reserve设置为true或false。问题是如果当前用户在多个游戏中并且将布尔值设置为if / else语句的最后一个，则循环似乎同时通过if和else。希望你理解我的意思:)）

以下是代码：

Game.get().then(function(games){
    $scope.games = games;
    angular.forEach(games, function(game, gameIndex){
        game.tees = [];
        Tee.query({game_id: game.id}).then(function(tees){
            game.tees = tees; 
        })
        PlayersGame.query({players: game.id}).then(function(players){
            game.players = [];
            game.reserves = [];
            angular.forEach(players, function(value, index){
                if(value.reserve == false){
                    var id = value.id;
                    User.get(value.userId).then(function(player){
                        game.players.push(player);
                        if(player.id == $scope.current_user.id){
                            game.current_user = $scope.current_user;
                            game.current_user.reserve = false;
                        }
                    });
                }else{
                    User.get(value.userId).then(function(reserve){
                        game.reserves.push(reserve);
                        if(reserve.id == $scope.current_user.id){
                            game.current_user = $scope.current_user;
                            game.current_user.reserve = true;
                        }
                    });
                }
            });
        });
    })
});

我在ng-repeat中使用$ scope.game然后我需要更多的孩子使用$ scope.game.players和$ scope.game.reserves进行ng-repeats。当前用户想要取消他们的游戏时，我可以成功删除记录服务器端，但我不能正确地做客户端。我无法在$ scope.game中找到要删除的正确记录 这是取消游戏功能。

$scope.cancelGame = function(gameId, current_user, gameIndex){
var confirmation = confirm("Are you sure that you want to cancel your booking?");
if(confirmation){
    PlayersGame.query({game_id : gameId, user_id: current_user.id}).then(function(game){
        game[0].delete().then(function(){
            if(current_user.reserve = true){console.log($scope.games[gameIndex]);
                angular.forEach($scope.games[gameIndex].reserves, function(value,index){
                    if(value.id == current_user.id){
                        $scope.games[gameIndex].reserves.splice(index,1);
                    }
                })
            }else{console.log($scope.games[gameIndex]);
                angular.forEach($scope.games[gameIndex].players, function(value,index){
                    if(value.id == current_user.id){
                        var removed = $scope.games[gameIndex].players.splice(index,1);console.log(removed);                             
                    }
                })
            }
        });
    });
    $scope.games[gameIndex].current_user = [];
  }
}

我刚刚在循环中对一些控制台日志进行了测试。在我看来，循环似乎工作正常。我认为问题在于ng-repeat。我认为变量game.current_user.reserve在循环运行后在ng-repeat中设置。这有可能吗？

在任何情况下都是html：

<div ng-repeat="game in games | orderBy: 'createdAt'" class="well">

<legend ng-show="current_user.admin"><a href="/#/game/edit/{{game.id}}">Game date: {{game.gameDate}}</a></legend>
<legend ng-show="!current_user.admin">Game date: {{game.gameDate}}</legend>
<div ng-show="game.players.length > 0">
    <h4>Players</h4>
        <ul class="list-inline list-unstyled">
            <li ng-repeat="player in game.players">
                <ul class="list-unstyled imageList">
                    <li class="hidden-xs playerImg"><img class="img-rounded img-thumbnail" src="{{player.picture.thumb.url}}" alt="{{player.name}} picture" width="100px" height="100px" /></li>
                    <li>{{player.name}}</li>
                    </ul>
            </li>
        </ul>
    </div>
    <div ng-show="game.players.length == 0">
        <p>There are no players for this game yet</p>
    </div>  
    <div ng-show="game.reserves.length > 0">
        <hr />
        <h4>Reserves</h4>
        <ul class="list-inline list-unstyled">
            <li ng-repeat="reserve in game.reserves">
                <ul class="list-unstyled imageList">
                    <li class="hidden-xs playerImg"><img class="img-rounded img-thumbnail" src="{{reserve.picture.thumb.url}}" alt="{{reserve.name}} picture" width="100px" height="100px" /></li>
                    <li>{{reserve.name}}</li>
                    </ul>
            </li>
        </ul>
    </div>
    <div class="row">
        <div>   index: {{$index}},  game id: {{game.id}}, current_user.reserve: 
            <div ng-show="game.current_user" class="col-md-4">
                <p>You are already booked into this game</p>
                <a href="" ng-click="cancelGame(game.id, game.current_user, $index)" class="btn btn-danger">Cancel booking</a>
            </div>
            <div ng-show="!game.current_user && game.players.length < 8" class="col-md-4">
                <p>Would you like to play in this game?</p>
                <a href="" ng-click="bookGame(game.id, current_user.id)" class="btn btn-success">Book a spot</a>
            </div>
            <div ng-show="!game.current_user && game.players.length >= 8" class="col-md-4">
                <p>This game is fully booked! But you can reserve a sopt</p>
                <a href="" ng-click="bookReserve(game.id, current_user.id)" class="btn btn-success">Book a reserve spot</a>
            </div>
        </div>  
        <div ng-show="game.tees.length > 0">
            <div class="col-md-2 pull-right">
                <h5 ng-repeat="tee in game.tees">Tee time {{$index + 1}}: {{tee.time }}</h5>
            </div>
        </div>
    </div>
</div>

Answer 1

嗯，我想我是对的。变量在ng-repeat内设置。至少布尔做了。我重新组织了循环并在取消游戏功能中改变了一些东西。解决方案的优势在于我完全干掉了我的代码！奖金！

Game.get().then(function(games){
    $scope.games = games;
    angular.forEach(games, function(game, gameIndex){
        game.tees = [];
        Tee.query({game_id: game.id}).then(function(tees){
            game.tees = tees; 
        })
        PlayersGame.query({players: game.id}).then(function(players){
            game.players = [];
            game.reserves = [];
            angular.forEach(players, function(value, index){
                User.get(value.userId).then(function(player){
                    player.reserve = value.reserve;

                    game.players.push(player);
                    if(player.id == $scope.current_user.id){
                        game.current_user = $scope.current_user;
                    }
                });
            });
        });
    })
});


$scope.cancelGame = function(gameId, current_user, gameIndex){
var confirmation = confirm("Are you sure that you want to cancel your booking?");
if(confirmation){
    PlayersGame.query({game_id : gameId, user_id: current_user.id}).then(function(game){
        game[0].delete().then(function(){
            angular.forEach($scope.games[gameIndex].players, function(value,index){
                    if(value.id == current_user.id){
                        $scope.games[gameIndex].players.splice(index,1);
                    }
                })
        });
    });
    $scope.games[gameIndex].current_user = null;
  }
}