AngularJS - 填充 ng-repeat答案

【问题标题】：AngularJS - padded ng-repeatAngularJS - 填充 ng-repeat
【发布时间】：2015-11-01 20:13:48
【问题描述】：

我想使用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，则 ng-repeat 的输出数组应如下所示：

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

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

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

currentPlayer（名称：'max'）的对象应该放在中间，上下有两个以下条目。

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

如何实现两个对象的“填充”？有没有办法用自定义过滤器修复或者我需要滚动条？谢谢

【问题讨论】：

需要对数据进行排序并找到包含所需分数的索引并根据该索引过滤数组。不是您可以在视图中非常简单地执行的操作，需要自定义过滤
你可以将order移动到js代码中，得到类似这样的东西：plnkr.co/edit/j08v0eT9aHD4tFLruEUI?p=preview

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案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。

【讨论】：

【解决方案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

【讨论】：