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

javascript angularjs directive ng-repeat
chrney_p picture chrney_p · Dec 12, 2014 · Viewed 12.4k times · Source

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

New Dev picture New Dev · Dec 12, 2014

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

Related questions

How to get evaluated attributes inside a custom directive

I'm trying to get an evaluated attribute from my custom directive, but I can't find the right way of doing it. I've created this jsFiddle to elaborate. <div ng-controller="MyCtrl"> <input my-directive value="123"> <input my-directive …

Read More
How do I pass multiple attributes into an Angular.js attribute directive?

I have an attribute directive restricted as follows: restrict: "A" I need to pass in two attributes; a number and a function/callback, accessing them within the directive using the attrs object. If the directive was an element directive, restricted …

Read More
Append html to an element in directive and make a local function to interact with it

In my AngularJS application, I have different complex inputs everywhere. For example, some inputs have a directive to use autocompletion with Google Places or with autocompletion from Twitter Bootstrap. I'm searching for a way to make a directive which displays …

Read More