Question

我为具有三个以上项目的动态列表项创建了“显示更多”链接，但是在单击“显示更多”后将此链接更改为“显示较少”存在问题。我需要另外两个图标。有什么想法可以改变吗？是否可以仅使用HTML中的ng指令创建它，而无需使用控制器中的函数？

我的代码：

<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

我如下更改了我的代码，它可以正常工作！：）

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

您可以使用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>

Answer 3

最好的选择是根据您的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

显示AngularJS中动态列表项的更多/更少链接

3 个答案: