Angularjs 有什么方法可以让我的无序列表实现更多/更少的显示

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

以下是AngularJS片段：

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

关键职责


{{contribution}

您可能希望对

$index

变量使用

track by$index

和

ng if

指令，并使用局部变量对列表进行限制

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

关键职责



{{贡献}}


显示更多
少展示

您也可以使用过滤器：

关键职责


{{contribution}

显示更多
少展示

---

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

这样对我来说就行了，但让我问一个问题。对于按钮单击，我将showmore/Less组合成一个按钮。我有3个属性的表达式，这有点破坏html。我认为AngularJS的目的是要有干净的标记。有没有办法把这些都转移到控制器上<代码>实际上，可以使用不同的（以及复杂的）条件来维护标记。然而，如果我是你，我会保留两个按钮，以实现可持续发展。也许有一天我想在服务器端做一些分页，这样我就可以很容易地将函数分为“多”和“少”，因为点击“少”会让我做一些前端工作！但是，在AngularJS中，用两个大括号

{{}}

表示的所有内容都是可能的：D

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