角指令与NG重复，NG-秀＆QUOT;显示更多＆QUOT;和延迟加载 [英] Angular directive with ng-repeat, ng-show "Show more" and lazy-load

问题描述

我使用该指令，遍历数组myArr，该过滤几个条件。

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:

一）NG-表演的一部分是存在的，因为我有处理这个条件：

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>

，以显示或隐藏显示更多的一部分。我不能想出的这个切换和/或项目本身的另一个想法。 $ scope.visible，控制器里面，设置为10，一旦我们开始。我不能用limitTo，因为它没有给我的可能性，以确定是否有更多的显示与否，因为它的课程扒的阵列设置的限制。

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="..."> 

标签。我怎样才能prevent这些图片，因为他们不是在上面的结构如图只要加载？

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

非常感谢事先！

推荐答案

使用 NG-如果而不是 NG-节目。

与 NG-节目，falsey NG-如果将删除DOM元素。

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

编辑：

此外，您还可以，其实使用 limitTo 过滤器，这将使您的code干净多了：

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重复，NG-秀＆QUOT;显示更多＆QUOT;和延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！