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

Question

我为包含三个以上项目的动态列表项目创建了"show more"链接，但在单击"show more"后，我遇到了将此链接更改为"show less"的问题。我需要另外两个图标。有什么想法可以改变吗？是否可以只使用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

最好的选择是根据document.actUnitMonographViewList的长度使用ng-if语句。试试这样的东西：

<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