13

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!

chrney_p
  • 165
  • 1
  • 2
  • 7

1 Answers1

29

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

New Dev
  • 48,427
  • 12
  • 87
  • 129
  • 1
    Whoa, that solved it straight away, thanks! What I had a bit in mind though, even though I didn't ask (as I assumed a solution that somehow runs a function where I by myself can steer every item), is that I do want to load not only the visible but the "visible plus next 10" item's images. – chrney_p Dec 12 '14 at 06:23
  • Then use a combination of `ng-show` and `ng-if` (or a combination of `limitTo: limitToLoad` and `ng-show="$index < limitToLoad-10"`) – New Dev Dec 12 '14 at 06:31
  • I see you edited your answer above. I checked the plunker, but the button does not disappear, once you reached the end of the (filtered) array. – chrney_p Dec 12 '14 at 07:34
  • Updated plunker and answer – New Dev Dec 12 '14 at 07:36
  • Unfortunately not quite yet - remember I had some (custom) filters, such as a searchbox and a checkbox? A bit like this, http://plnkr.co/edit/qkDEcMe77bz1h3ZmTtTH?p=preview – chrney_p Dec 12 '14 at 11:16
  • Well, this is a more difficult problem. What do you want to have happened? If I'm showing all numbers until 5, and then switch to evens - should it show `[2,4]` (all loaded) or should it show `[2,4,6,8,10]` (since 5 items were shown before). Here's a [plunker](http://plnkr.co/edit/RJAenAgn1dbn4roy1pUX?p=preview) with the former option, but it requires filtering ahead of time. – New Dev Dec 12 '14 at 11:49
  • I would like to show as many items as there are visible, 2 when we start, 4 when we clicked "read more", 6 when we click "read more" once again, etc. So much for the number of items shown, always. Then again, if I filter, I will just see the items we filter (in this case all even numbers), but again only as many as we chose to show, dependent on how many times we clicked the "Show more" button. If there are no more items to show (filtered or not), we just do not show it. So, to answer you question, the later (2, 4, 6, 8, 10). – chrney_p Dec 12 '14 at 19:05
  • Then just reverse the order of filters – New Dev Dec 12 '14 at 20:06
  • if you have filter and you want to hide the button based on the filter result change ng-hide to `results.length === (results| filter1:field| filter2:field2).length` – madalinivascu May 17 '17 at 09:55