Как сделать ссылку «Меньше» на одну позицию после третьего пункта в списке - AngularJS

Question

У меня есть элементы списка со ссылкой показать больше / меньше.Ссылка «Больше» находится на четвертом месте, и после нажатия на них ссылка «Меньше» находится в конце списка.Мне нужна ссылка «Меньше» в одной позиции - на четвертом месте в списке, как ссылка «Еще».Остальные элементы списка должны быть после ссылки «Меньше».Есть идеи, как мне это сделать?

Мой код:

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

• Теперь ссылка "Меньше" в элементах списка выглядит так:

  1. item
  2. item
  3. item
  4. item
  5. item
  6. item
  7. Меньше

• Он должен быть на четвертом месте все время:

  1. item
  2. item
  3. item
  4. Меньше (например, ссылка "More")
  5. item
  6. item

Answer 1

Решение:

<ul ng-if="::document.actUnitMonographViewList" class="commentary-snippets">
  <li ng-repeat="monograph in document.actUnitMonographViewList | limitTo: document.monographLimit ? 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>
    <div ng-if="$index === 2" ng-click="document.monographLimit = !document.monographLimit" class="list-items-toggle">
      <i ng-class="{'fa fa-chevron-up': document.monographLimit, 'fa fa-chevron-down': !document.monographLimit}" class="list-items-toggle-arrow"></i>
      <a class="list-items-toggle-link">{{document.monographLimit ? 'LIST_ITEMS_CONTENT.LESS' : 'LIST_ITEMS_CONTENT.MORE' | translate}}</a>
    </div>
  </li>
</ul>

Answer 2

Попробуйте использовать ng-if оператор, относящийся к $index из ng-repeat элемента.

<ul ng-if="::document.actUnitMonographViewList" class="commentary-snippets" ng-repeat="monograph in document.actUnitMonographViewList | limitTo: monograph.limit ? document.actUnitMonographViewList.length : 3">
  <li>
  <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-if="$index == 3" 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> 

Вот аналогичный пример: http://next.plnkr.co/edit/UxxNV96TWPAUmIwc?preview