Show more/less link for dynamic list items in AngularJS

Question

I created 'show more' link for dynamic list items which have more than three items but I have a problem with change this link to 'show less' after click 'show more'. I need two another icon for that. Any ideas how I can change it? It is possible to create it only with ng directives in HTML without functions in a controller?

My code:

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

Have a look at:https://stackoverflow.com/questions/32211888/how-to-load-more-elements-with-angular — Prashant Pimpale, Dec 13 '18 at 14:01
This appears to be a data hiding problem. New AngularJS developers often do not realize that `ng-repeat`, `ng-switch`, `ng-view`, `ng-include` and `ng-if` all create new child scopes, so the problem often shows up when these directives are involved. See [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). The solution is to use a dot, i.e. `ng-click="document.showMore = true"`. — georgeawg, Dec 13 '18 at 14:23
There is also potential for problems when using [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Window/document) in an AngularJS expression. `document` is a global variable and may cause problems when using it as a scope variable. — georgeawg, Dec 13 '18 at 14:29

score 1 · Answer 1 · edited Dec 14 '18 at 14:33

I changed my code like below and it works! :)

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

score 0 · Answer 2 · answered Dec 13 '18 at 14:01

You can use an ngIf, see following:

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

I made sth like that and it doesn't work... I need another icon which I want to use for 'show less' link so it must be in separate

score 0 · Answer 3 · answered Dec 13 '18 at 14:07

0

The best option is to use ng-if statement based on your document.actUnitMonographViewList length. Try with something like this:

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

and then add showLess

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

Here is example of something like that: http://next.plnkr.co/edit/nuyxRk9ioXDGjq2n?preview

answered Dec 13 '18 at 14:07

BartoszTermena

1,487
1
8
16

ng-click="showLess= true" ? It doesn't work. I don't see a "showLess" value in any part of the code in the example from the link above. – Natalia Gurgul Dec 13 '18 at 14:49
Yeah, that is right, but you can create showLess function – BartoszTermena Dec 13 '18 at 14:50
@Natalia Gurgul check out my plunker, and try create similar function showMore and showLess – BartoszTermena Dec 13 '18 at 14:50
In my opinion this is the easiest way to showing less/more in ng-repeat – BartoszTermena Dec 13 '18 at 14:51

Show more/less link for dynamic list items in AngularJS

3 Answers3