Показать ссылку больше / меньше для элементов динамического списка в AngularJS

Question

Я создал ссылку «показать больше» для элементов динамического списка, которые содержат более трех элементов, но у меня возникла проблема с изменением этой ссылки на «показать меньше» после нажатия «показать больше».Мне нужны еще две иконки для этого.Есть идеи, как я могу это изменить?Можно создать его только с помощью директив ng в HTML без функций в контроллере?

Мой код:

<ul ng-if="::document.actUnitMonographViewList" class="commentary-snippets">
  <li ng-repeat="monograph in document.actUnitMonographViewList | limitTo:showMore ? document.actUnitMonographViewList.length : 3">
     <i ng-if="document.actUnitMonographViewList.length > 1"
        class="fa fa-chevron-right"></i>
      <a href="" ng-href="{{ ::getPublicationLink(monograph, 'monograph') }}"
         ng-class="{'arrow-link': document.actUnitMonographViewList.length > 1}" 
         user-preferences-target>{{::monograph.title}}
      </a>
   </li>
   <li ng-show="document.actUnitMonographViewList.length > 3">
      <i class="fa fa-chevron-down"></i>
      <a ng-click="showMore = true">Show more</a>
   </li>
   <li ng-show="document.actUnitMonographViewList.length > 3">
      <i class="fa fa-chevron-up"></i>
      <a ng-click="">Show less</a>
   </li>
</ul>

Answer 1

Лучший вариант - использовать оператор ng-if на основе вашей длины document.actUnitMonographViewList.Попробуйте что-то вроде этого:

<a ng-if="document.actUnitMonographViewList.length > showMore" ng-click="showMore = true" class="">Show more</a>

, а затем добавьте showLess

<a ng-if="document.actUnitMonographViewList.length <= showMore" ng-click="showLess= true" class="">Show less</a>

Вот пример чего-то такого: http://next.plnkr.co/edit/nuyxRk9ioXDGjq2n?preview

Answer 2

Я изменил свой код, как показано ниже, и он работает!:)

<ul ng-if="::document.actUnitMonographViewList" class="commentary-snippets">
  <li ng-repeat="monograph in document.actUnitMonographViewList | limitTo: monograph.limit ? document.actUnitMonographViewList.length : 3">
  <i ng-if="document.actUnitMonographViewList.length > 1" class="fa fa-chevron-right"></i>
    <a href="" ng-href="{{ ::getPublicationLink(monograph, 'monograph') }}" ng-class="{'arrow-link': document.actUnitMonographViewList.length > 1}" user-preferences-target>
      {{::monograph.title}}
    </a>
  </li>
  <li ng-show="document.actUnitMonographViewList.length > 3">
    <i class="list-items-toggle-arrow" ng-class="{'fa fa-chevron-up': monograph.limit, 'fa fa-chevron-down': !monograph.limit}" ng-click="monograph.limit = !monograph.limit"></i>
    <a ng-click="monograph.limit = !monograph.limit" class="list-items-toggle-link">{{monograph.limit ? 'LIST_ITEMS_CONTENT.LESS' : 'LIST_ITEMS_CONTENT.MORE' | translate}}</a>
  </li>
</ul>

Answer 3

Вы можете использовать ngIf, см. Следующее:

<ul ng-if="::document.actUnitMonographViewList" class="commentary-snippets">
  <li ng-repeat="monograph in document.actUnitMonographViewList | limitTo:showMore ? document.actUnitMonographViewList.length : 3">
     <i ng-if="document.actUnitMonographViewList.length > 1" class="fa fa-chevron-right"></i>
      <a href="" ng-href="{{ ::getPublicationLink(monograph, 'monograph') }}" ng-class="{'arrow-link': document.actUnitMonographViewList.length > 1}" user-preferences-target>{{::monograph.title}}</a>
   </li>
   <li ng-show="document.actUnitMonographViewList.length > document.itemsLimit">
      <i class="fa fa-chevron-down"></i>
      <a ng-if="showMore==false" ng-click="showMore = true" class="">Show more</a>
      <a ng-if="showMore==true" ng-click="showMore = false" class="">Show less</a>
   </li>
</ul>