Angular directive with ng-repeat, ng-show “Show more” and lazy-load

Question

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!

Answer 1

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