這可能是一個簡單的問題,但我一直在盯着這個代碼年齡和嘗試不同的變化,但我似乎無法解決它。angularJS Rails應用程序,通過陣列的問題
我正在循環播放由遊戲中的玩家組成的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;
}
});
}
});
});
})
});
我使用$ scope.game在NG-重複,然後我要更多的孩子NG-重複使用$範圍。 game.players和$ scope.game.reserves。當前用戶想要取消他們的遊戲時,我可以成功刪除記錄服務器端,但我無法正確地在客戶端做到這一點。我無法找到正確的記錄刪除$ 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 = [];
}
}
我剛剛在循環中做了一些控制檯日誌的測試。在我看來,循環似乎很好。我認爲問題在於重複。我認爲在循環運行後,變量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>