带有 ng-repeat、ng-show “显示更多"的 Angular 指令和延迟加载 [英] Angular directive with ng-repeat, ng-show "Show more" and lazy-load

问题描述

我使用这个指令，遍历数组myArr"，过滤一些条件.

这给了我两个我想获得一些意见的问题:

a) ng-show 部分在那里，因为我有一个条件来处理这个:

<a ng-click='visible=visible+10' ng-show='visible <filteredArr.length'>显示更多</a></p>

为了显示或隐藏显示更多"部分.我无法想出另一个关于切换这个和/或项目本身的想法.$scope.visible 在控制器内部设置为 10，一旦我们启动.我无法使用 limitTo，因为它无法让我确定是否有更多内容要显示，因为它当然会将数组砍"到设定的限制.

b) 在指令内部，模板打印一个

标签.只要这些图像未显示在上述结构中，我该如何阻止它们加载?

非常感谢！

解决方案

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

与 ng-show 不同，falsey ng-if 从 DOM 中删除元素.

此外，事实上，您可以使用 limitTo 过滤器，这将使您的代码更加简洁:

<foo ng-repeat="item in items | limitTo: limit as results"></foo>
<button ng-hide="results.length === items.length"ng-click="limit = limit +2">显示更多...</button>

plunker

I use this directive, iterating over an array "myArr", filtering for a few conditions.

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

This gives me two issues I'd like to get some input on:

a) the ng-show part is there because I have a condition that handles this:

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

in order to show or hide the "Show more" part. I cannot come up with another idea on toggling this and/or the items itself. $scope.visible is, inside the controller, set to 10, once we start. I couldn't use limitTo as it does not give me the possibility to determine if there's more to show or not, as it of course "chops" the array to the set limit.

b) Inside the directive, the template prints an

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

tag. How can I prevent these images to load as long as they're not shown in the above structure?

Thanks a lot in advance!

解决方案

Use ng-if instead of ng-show.

Unlike ng-show, falsey ng-if removes the element from the DOM.

EDIT:

Also, you can, in fact, use limitTo filter, which would make your code much cleaner:

<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

这篇关于带有 ng-repeat、ng-show “显示更多"的 Angular 指令和延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！