AngularJS - padded ng-repeat

Question

i want to create a highscore list using ng-repeat .

The Player list looks like:

[
  {name: 'anton', score: 32},
  {name: 'rolf', score: 3},
  {name: 'max', score: 12},
  {name: 'mike', score: 49},
  {name: 'john', score: 25},
  {name: 'rui', score: 5},
  {name: 'wolle', score: 6},
  {name: 'run', score: 0}
]

In case $scope.currentPlayer.score is 12 the output array of ng-repeat should look so:

[
  {name: 'anton', score: 32},
  {name: 'john', score: 25},

  {name: 'max', score: 12},

  {name: 'wolle', score: 6},
  {name: 'rui', score: 5}
]

The object of the currentPlayer (name: 'max') should be placed in the middle with the two following entries above and below.

In html output I also need the index of the Player-List, that depends on the score.

how i tried:

<div ng-repeat="user in highscoreTable | orderBy: 'score*1' : true"
     ng-hide="<!-- relationship betw. currentPlayer.score and user.score -->">

  <span>{{$index + 1}}</span>
  <span>{{user.name}}</span>
  <span>{{user.score}}</span>

</div>

How can i achieve that 'padding' of two objects ? Is there a way to fix with an custom filter or do i need a scroll-bar ? Thanks

Answer 1

Something like this will work if the currentPlayer.score is present in the players score list (replace <p></p> with your preferred padding.

<div ng-repeat="user in highscoreTable | orderBy: 'score' : true">
    <p ng-if="user.score === currentPlayer.score"></p>
    <span>{{$index + 1}}</span>
    <span>{{user.name}}</span>
    <span>{{user.score}}</span>
    <p ng-if="user.score === currentPlayer.score"></p>
</div>

See plunker here .

Answer 2

You can use ng-class to add a CSS class to specific elements and add the padding or whatever you want to do via this class.

<div ng-repeat="user in highscoreTable | orderBy: 'score*1' : true" ng-class="{'current-player' : user.score === currentPlayer.score}">

  <span>{{$index + 1}}</span>
  <span>{{user.name}}</span>
  <span>{{user.score}}</span>

</div>

See CodePen