AngularJS - padded ng-repeat

Question

Я хочу создать список рекордов, используя ng-repeat.

Список плеер выглядит следующим образом:

[ 
    {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} 
] 

В случае $scope.currentPlayer.score 12 выходной массив нг-повтора должен выглядеть так:

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

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

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

объекта (название currentPlayer: «Макс ') должны быть размещены посередине с двумя следующими данными выше и ниже.

В выход html мне также нужен индекс Player-List, который зависит от оценки.

, как я пытался:

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

Как я могу добиться того, что 'заполнение' двух объектов? Есть ли способ исправить с помощью настраиваемого фильтра или мне нужна панель прокрутки? Благодаря

Answer 1

Что-то, как это будет работать, если currentPlayer.score присутствует в игроках забьет список (заменить <p></p> предпочитаемой набивки.

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

См plunker here.

Answer 2

Вы можете использовать ng-class добавить CSS класса к конкретным элементам и добавить прокладку или все, что вы хотите сделать через этот класс.

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

См. CodePen