带有ng-repeat，ng-show“显示更多”和延迟加载的Angular指令

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>

矮人