2013-11-21 12 views
0

這可能是一個簡單的問題,但我一直在盯着這個代碼年齡和嘗試不同的變化,但我似乎無法解決它。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> 

回答

0

嗯,我想我是對的。變量在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; 
    } 
}