Angularjs içindeki bir dizideki x nesnesini gösterme

Question

Uygulamamın, kalıcı bir pencerede görüntülemek ve geçiş yapmak istediğim kendi özniteliklerine sahip bir 'oynatıcı' takımı var. Ben ilk isim görüntülemek için alabilirsiniz gösterilecek oyuncu (ve daha sonra bazı özelliklerini) istemek

<!-- 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> 

şöyle bir kullanıcı arayüzüdür. Ancak previousPlayer() ve nextPlayer() işlevlerini kullanarak döngü yapmak istiyorum.

$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); 
}; 

gol olurdu sadece görmek değil muktedir değil, aynı zamanda player modelini değiştirmek için: js bölüm şöyle currentPlayer adında bir ben artırmak değişken ve azalma vardır.

Answer 1

kaldırmak görünümünde yeni, tesisi $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(); 
}; 

set böylece bir kalıcı pencere yeterli olmalı.

HTML'iniz biraz basitleştirilmiş olabilir - sen ng-repeat ve ng-if kullanmaya gerek yoktur: yerine players[currentPlayer] ile cari çalara erişmek:

<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> 

Çalışma JsFiddle: http://jsfiddle.net/kxUR9/16/

Answer 2

Yalnızca bir oyuncunun görüntülenmesini istiyorsanız, ng-repeat'u kullanmak mantıklı değildir.

Hemen hemen, Bir seferde 1 oyuncu için oyuncu verilerini görüntülemek istediğiniz ng-repeat