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:

<ulclass="group-links"><liclass="second-link"ng-repeat="subchild in child.thirdLevelChildList | limitTo:4"><ang-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a></li><li><ahref="#"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

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