如何在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內顯示一些任意內容的片段。下面的圖表顯示了我所追求的。左側顯示它應該如何在未過濾狀態下顯示，右側顯示如果搜索項存在。

正如你所看到的，我想強調與第一項「接下來」標題，並遵循的，「在那之後」的標題。當搜索出現時，我根本不需要這些標題，因爲它們不相關。

我對Angular完全陌生（順便說一句，「你在服務中讓我失去了新感覺），但是來自Knockout.js背景。解決這個問題的「角度方式」是什麼？

堆起來ng-if的標題，並與$index比較？ $index甚至關心應用的過濾器嗎？

Answer 1

我的解決方案是隻給ng-show標題，如果通過濾鏡的結果長度等於遊戲總數：

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

Answer 2

一種骯髒的解決方案組成：ng-repeat ED元素中，把像

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

而與此明顯的問題是，兩項測試分別對每個ng-repeat編輯元素的含量的「實例」進行，除了第一個和第二個之外，它們是無用的。

否則，你可以將你的前兩位內容與標題以外ng-repeat，然後從索引2開始重複，

如果不是，則將您的數據分爲firstElement,secondElement和rest，其中rest爲Array.prototype.slice.call(/* your initial list of elements */, 2)。

最後一個解決方案的問題是，它需要您調整數據以適應您的呈現方式，這是出於顯而易見的原因而不可取的。

編輯：這裏確定的東西更好，而不是測試：

<div ng-if="elements.length > 0"> 
    <h2>Next up</h2> 
    <div><!-- First content goes here, it uses elements[0] --></div> 
</div> 
<div ng-if="elements.length > 1"> 
    <h2>After that</h2> 
    <div><!-- Second content goes here, it uses elements[1] --></div> 
</div> 
<div ng-repeat="element in elements.slice(2)"> 
    <!-- The rest goes here, unconditionally --> 
</div> 

Answer 3

，而不是在game-card標籤做你的NG-重複，做一個包裝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>