角度 - 如果ng-repeat上的> 5，则隐藏项目

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.

我有一个包含50个项目的筛选器列表。我只是想显示5个项目并隐藏其余部分来制作“显示更多”按钮。

<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>

3 个解决方案

#1

You can use the LimitTo in Angular

您可以在Angular中使用LimitTo

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

Here is a sample JsFiddle

这是一个示例JsFiddle

#2

Use limitTo filter in AngularJS

在AngularJS中使用limitTo过滤器

{{ 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>

#3

Look at this thread and this demo plunker

看看这个线程和这个演示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>

#1