Reputation: 1974
I have the following HTML where i am listing few items with Angular JS ng-repeat
<div class="header-container">
<div class="header-list" data-ng-repeat="details in response.data" data-ng-show='$index<3'>{{ details.name }}</div>
<div class="show-more" data-ng-if="details.length > 3"></div>
</div>
header-list
and show-more
are sibling divs and i have ng-repeat on header-list
. i only want to show the div show-more
if the number of items in header-list
is more than 3. since the scope of the ng-repeat is not in show-more
i cannot do this. is there a way to do this without changing the DOM structure? Thanks in advance
Upvotes: 0
Views: 68
Reputation: 546
simple:
<div class="header-list" data-ng-repeat="details in response.data | limitTo: 3">{{ details.name }}</div>
<div class="show-more" data-ng-if="response.data.length > 3">View All</div>
Upvotes: 1