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