anglejsの配列にxオブジェクトを表示

Question

私のアプリケーションには、モーダルウィンドウに表示して循環させる独自の属性を持つ「プレーヤー」のセットがあります。 UIは次のようになります。

<!-- Score Round Modal --> 
    <div class="modal fade" id="myScoreModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-repeat="player in players"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Score for {{player.data}}</h4> 
     </div> 
     <div class="modal-body"> 
... 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="cancelRound()">Cancel</button> 
      <button type="button" class="btn btn-warning" ng-click="previousPlayer()">Previous</button> 
      <button type="button" class="btn btn-default" ng-click="nextPlayer()">Next Player</button> 
      <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="calculateRound()">Finish</button> 
     </div> 
     </div> 
    </div> 
    </div> 

ここで、プレイヤー（および後でいくつかの属性）を表示したい場合は、表示するファーストネームを取得できます。しかし、私は関数previousPlayer()とnextPlayer()を使って循環したいと思います。 jsセクションでは、私が増加変数と減少がそうのようなcurrentPlayerと呼ばれています：

$scope.nextPlayer = function() { 
    // Cycles to next player cards within the round 
    $scope.currentPlayer++; 
    console.log($scope.currentPlayer); 
}; 


$scope.previousPlayer = function() { 
    // Cycle to previous player cards within the round 
    $scope.currentPlayer--; 
    console.log($scope.currentPlayer); 
}; 

目標はただ表示するだけでなく、playerモデルを修正しないことができるようになります。

Answer 1

を削除するビューで$scope.player

$scope.currentPlayer = 0; 

function setPlayer() { 
    if ($scope.currentPlayer >= 0 && $scope.currentPlayer < $scope.players.length) { 
    $scope.player = $scope.players[$scope.currentPlayer]; 
    }else{ 
    alert('At end of players'); 
    } 
} 

setPlayer(); 

$scope.nextPlayer = function() { 
    // Cycles to next player cards within the round 
    $scope.currentPlayer++; 
    setPlayer(); 

}; 
$scope.previousPlayer = function() { 
    // Cycle to previous player cards within the round 
    $scope.currentPlayer--; 
    setPlayer(); 
}; 

新しいプロパティを設定します。

あなたのHTMLは、ビットを簡素化することができます - あなたはng-repeatとng-ifを使用する必要はありません。代わりにplayers[currentPlayer]と現在のプレーヤーにアクセス：

<div class="modal fade" id="myScoreModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Score for {{players[currentPlayer ].data}}</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="cancelRound()">Cancel</button> 
      <button type="button" ng-if="currentPlayer > 0" class="btn btn-warning" ng-click="previousPlayer()">Previous</button> 
      <button type="button" ng-if="currentPlayer < players.length - 1" class="btn btn-default" ng-click="nextPlayer()">Next Player</button> 
      <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="calculateRound()">Finish</button> 
     </div> 
    </div> 
    </div> 
</div> 

ワーキングJsFiddle：http://jsfiddle.net/kxUR9/16/

Answer 2

1人のプレーヤーのみを表示する場合は、ng-repeatを使用すると意味がありません。

ただ単にあなたが一度に1人のプレーヤーのためのプレーヤーのデータを表示したいので、1つのモーダルウィンドウが十分であるべきng-repeat