Show A Link Based On A Condition In AngularJS

I'm creating a navigation bar in AngularJS. I am showing and hiding the submenu 'div.farm-links' on mouseover and mouseleave respectively on 'div.menu-links'. Now, in my submenu wh

Solution 1:

I believe what you need is this:

  <ul class="group-links">
    <li class="second-link" ng-repeat="subchild in child.thirdLevelChildList | limitTo:4">
      <a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
    </li>
    <li>
      <a href="#" ng-if="child.thirdLevelChildList.length > 4">Show All</a>
    </li>
  </ul>

Notes: You had ng-repeat on <ul>. I'm assuming you wanted to repeat the list items, not the list (based on the values in thirdLevelChildList, so I've implemented in that way.

I use the limitTo to prevent more than 4 items from showing. I use ng-if to only show "Show All" if greater than 4.

Solution 2:

You can use limitTo to and a variable to keep count of number of list items. You can either set this variable in controller or using ng-init like below

 <ul class="group-links" ng-init="count=4">
    <li class="second-link" ng-repeat="subchild in child.thirdLevelChildList | limitTo:count">
      <a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
    </li>
    <li>
      <a ng-if="child.thirdLevelChildList.length > 4 && count == 4" ng-click="count=child.thirdLevelChildList.length">Show All</a>
    </li>
  </ul>