My application features a group of 'players' each with their own unique attributes that I want to showcase within a modal window and cycle through. The user interface is structured like this:
<!-- 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">×</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>
I have successfully displayed the player's first name, but now I aim to cycle through using the functions previousPlayer() and nextPlayer(). In the JavaScript section, there is a variable named currentPlayer which I increment and decrement as follows:
$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);
};
The objective here is not only to view but also to modify the player model.