Angular - Hide items if > 5 on ng-repeat

Question

I have a filter list which have 50 items. I just want to show 5 items and hide the rest to make a "Show More" button.

<ul>
    <li ng-repeat="a in filters.area">
         <input type="checkbox" ng-change="filter()" ng-model="a.checked"> {{ a.name }}
    </li>
</ul>
<span>SHOW MORE</span>

Answer 1

You can use the LimitTo in Angular

 <li ng-repeat="n in numbers | limitTo:numLimit">{{n}}</li>

Here is a sample JsFiddle

Answer 2

Use limitTo filter in AngularJS

{{ limitTo_expression | limitTo : limit : begin}}

Documentation

Something like this for your example:

<ul>
    <li ng-repeat="a in filters.area | limitTo: 5">
        <input type="checkbox" ng-change="filter()" ng-model="a.checked">
        {{a.name}}
    </li>
</ul>
<span>SHOW MORE</span>

Answer 3

Look at this thread and this demo plunker

<foo ng-repeat="item in items | limitTo: limit as results" n="{{item}}"></foo>
<button ng-hide="results.length === items.length" ng-click="limit = limit +2">show more...</button>