Question

我的AngularJS网页中有一个包含无序列表的部分。有时列表可能会很长，我想实现“显示更多/更少”功能默认显示更少。如果处于显示较少的模式，则显示前3名。

以下是AngularJS代码段：

<p><i>Key Responsibilities</i></p>
<ul>
    <li ng-repeat="contribution in emp.contributions">{{contribution}}</li>
</ul>

Answer 1

您可能希望在track by $index变量上使用ng-if和$index指令，并使用局部变量来限制列表。

<p><i>Key Responsibilities</i></p>
<ul ng-init="limit = 4">
   <li ng-repeat="contribution in emp.contributions track by $index" ng-if="$index < limit">
{{contribution}}
   </li>
</ul>
<button ng-click="limit = limit + 4">Show More</button>
<button ng-click="limit = limit - 4">Show Less</button>

Answer 2

您还可以使用limitTo过滤器：

<p><i>Key Responsibilities</i></p>
<ul ng-init="limit = 4">
  <li ng-repeat="contribution in emp.contributions | limitTo:limit">{{contribution}}</li>
</ul>
<button ng-click="limit = limit + 4">Show More</button>
<button ng-click="limit = limit - 4">Show Less</button>

这里可能是一个稍微好一点的解决方案，可以将大部分逻辑移动到控制器中：plunker。

有哪些方法可以使用我的无序列表更多/更少地实现节目

2 个答案: