Angular с ng-repeat, ng-show "Показать больше" и "ленивая загрузка"

Я использую эту директиву, повторяя массив "myArr", фильтруя несколько условий.

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

Это дает мне две проблемы, которые я хотел бы получить:

a) часть ng-show существует, потому что у меня есть условие, которое обрабатывает это:

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

чтобы показать или скрыть часть "Показать больше". Я не могу придумать другую идею о переключении этого и/или самих элементов. $scope.visible, внутри контроллера, устанавливается на 10, как только мы начнем. Я не мог использовать limitTo, поскольку это не дает мне возможности определить, есть ли еще что-либо показать или нет, поскольку он, конечно, "отбивает" массив до установленного предела.

b) Внутри директивы шаблон печатает

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

тег. Как я могу предотвратить загрузку этих изображений, если они не показаны в указанной выше структуре?

Большое спасибо!

Ответ 1

Используйте ng-if вместо ng-show.

В отличие от ng-show, falsey ng-if удаляет элемент из DOM.

EDIT:

Кроме того, вы можете использовать фильтр limitTo, который сделает ваш код намного чище:

<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