Какие способы реализовать шоу более / менее с моим неупорядоченным списком

Question

У меня есть раздел на моей веб-странице AngularJS, который содержит неупорядоченный список. Иногда список может быть очень длинным, и я хотел бы реализовать функцию «показать больше / меньше», по умолчанию показывать меньше. Показать топ-3, если в режиме «показать меньше».

Вот фрагмент кода AngularJS:

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

Answer 1

Вы также можете использовать фильтр 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 .

Answer 2

Вы можете использовать директиву 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>