Ang-directive使用ng-repeat，ng-show“顯示更多”和延遲加載

Question

我使用這個指令，迭代一個數組“myArr”，過濾幾個條件。

<myDirective 
    myData='item' 
    ng-repeat="item in filteredArr = (myArr | filter:searchField | filter:checkboxFilter)" 
    ng-show="$index < visible" 
/>

這給了我兩個問題，我想得到一些意見：

a）ng-show部分在那里，因為我有一個處理這個的條件：

<p>
    <a ng-click='visible=visible+10' ng-show='visible < filteredArr.length'>Show more</a>
</p>

為了顯示或隱藏“顯示更多”部分。 我無法想出切換這個和/或物品本身的另一個想法。 一旦我們開始，$ scope.visible在控制器內部設置為10。 我無法使用limitTo，因為它不能讓我確定是否有更多要顯示，因為它當然會“切斷”數組到設定的限制。

b）在指令內部，模板打印出一個

<img ng-src="..."> 

標簽。 只要在上述結構中沒有顯示這些圖像，我怎么能阻止它們加載？

非常感謝提前！

Answer 1

使用ng-if而不是ng-show 。

與ng-show不同，falsey ng-if從DOM中刪除元素。

編輯：

此外，您實際上可以使用limitTo過濾器，這將使您的代碼更清晰：

<div ng-init="limit = 2">
  <foo ng-repeat="item in items | limitTo: limit as results"></foo>
</div>
<button ng-hide="results.length === items.length" 
        ng-click="limit = limit +2">show more...</button>

plunker