javascript - 带有 ng-repeat、ng-show "Show more"和延迟加载的 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 在 Controller 内部设置为 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