如何使用Angular在ng-repeat中包含任意内容？

Question

我有一个我想要显示的项目的有序列表。使用Angular完成此操作非常简单：

<p>Filter a game: <input type="text" ng-model="search.name" /></p>
<game-card ng-repeat="game in games | filter:search" game ="game" size="large"></game-card>

这将输出已从数据库中排序的有序游戏列表。 但是，我想在此ng-repeat中显示一些任意内容的片段。下图显示了我所追求的内容。左侧显示它应该在未过滤状态下看起来如何，如果搜索词存在则显示在右侧。

正如您所看到的，我想突出显示带有“Next up”标题的第一个项目，然后是“After the”标题。当搜索出现时，我根本不想要这些标题，因为它们不相关。

我对Angular完全不熟悉（顺便说一句，“你在服务中失去了我的新东西”，但是来自Knockout.js背景。解决这个问题的“角度方式”是什么？

在标题上叠加ng-if并与$index进行比较？ $index是否关心正在应用的过滤器？

Answer 1

一种肮脏的解决方案：在_metadata ed元素中，添加类似

的内容

ng-repeat

这个问题的明显问题是对<div ng-if="$index === 0"> <h2>Next up</h2> </div> <div ng-if="$index === 1"> <h2>After that</h2> </div> <div> <!-- Your content goes here, unconditionally --> </div> ed元素的内容的每个“实例化”执行了两个测试，除了第一个和第二个元素之外它们都没用。

否则，您可以将前两位内容放在标题外 ng-repeat中，然后从索引2开始重复，但我不确定ng-repeat是否可以。

如果不是，请将您的数据拆分为ng-repeat，firstElement和secondElement，其中rest为rest。

最后一个解决方案的问题在于它需要您根据呈现方式调整数据，这显然是不可取的。

编辑：好的，这里有更好的东西，未经过测试：

Array.prototype.slice.call(/* your initial list of elements */, 2)

Answer 2

不是在game-card标记中执行ng-repeat，而是在换行div中执行，然后使用ng-repeat special variables：

<p>Filter a game: <input type="text" ng-model="search.name" /></p>
<div ng-repeat="game in games | filter:search">
  <div ng-if="$first">NEXT UP</div>
  <div ng-if="$index === 1">AFTER THAT</div>
  <game-card game="game" size="large"></game-card>
</div>

Answer 3

只有当通过过滤器的结果长度等于游戏总数时，我的解决方案才是ng-show标题：

<h2 ng-show="games.indexOf(game) == 1  && search.length == games.length">More Games</h2>