Show a link based on a condition in angularJS

Question

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 whenever 'child.thirdLevelChildList.length' is more than 5, it should show 5th link as 'View all' and hide all the remaining links. Else, it should show all the links.

For e.g., on mouse hovering 'about abc', under 'Company', I should see only : 'Strategy', 'Mission, Vision, Values', 'Leadership', 'Org chart' & the 5th link as 'view all'.

How do I achieve this? Here's my code:

angular.module('topNavApp', ['ngAnimate']).controller('navCtrl', ['$scope', '$timeout', function($scope, $timeout){
  $scope.pageData = {  
    "allChildList":[  
      {  
         "pageExist":true,
         "pageTitle":"About Abc",
         "pagePath":"http://www.yahoo.com",
         "openNewTab":true,
         "hideInTabletNav":true,
         "hideInMobileNav":true,
         "secondLevelChildList":[  
            {  
               "pageExist":true,
               "pageTitle":"News",
               "pagePath":"/content/myloc/about-Abc/news.html",
               "openNewTab":false,
               "thirdLevelChildList":[  

               ],
               "multiple":true,
               "thirdLevelPageExist":true
            },
            {  
               "pageExist":true,
               "pageTitle":"Company",
               "pagePath":"/content/myloc/about-Abc/company.html",
               "openNewTab":false,
               "thirdLevelChildList":[  
                  {  
                     "pageExist":true,
                     "pageTitle":"Strategy",
                     "pagePath":"/content/myloc/about-Abc/company/strategy.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Mission Vision Values",
                     "pagePath":"/content/myloc/about-Abc/company/missionvisionvalues.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Leadership",
                     "pagePath":"/content/myloc/about-Abc/company/leadership.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Org Chart",
                     "pagePath":"http://mysite/pages/OrgChart.aspx",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Corporate Responsibility",
                     "pagePath":"http://myloc2/who/global-impact",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"History",
                     "pagePath":"https://usa.Abc.com/about-Abc/our_business/history-of-Abc.html",
                     "openNewTab":true
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Products",
                     "pagePath":"http://myloc2/who/products",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Investor Info",
                     "pagePath":"http://investor.Abc.com/",
                     "openNewTab":true
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"View All",
                     "pagePath":"/content/myloc/about-Abc/company/view-more.html",
                     "openNewTab":false
                  }
               ],
               "multiple":true,
               "thirdLevelPageExist":true
            },
            {  
               "pageExist":true,
               "pageTitle":"Community",
               "pagePath":"/content/myloc/about-Abc/community.html",
               "openNewTab":false,
               "thirdLevelChildList":[  
                  {  
                     "pageExist":true,
                     "pageTitle":"Diversity + Inclusion",
                     "pagePath":"/content/myloc/about-Abc/community/diversity-and-inclusion.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Giving Back",
                     "pagePath":"http://myloc2/working/giving-back/Pages/default.aspx",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Ideas Community",
                     "pagePath":"/content/myloc/about-Abc/initiatives/ideas.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Other Communities",
                     "pagePath":"http://myloc2/working/get-involved/Pages/default.aspx",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"View All",
                     "pagePath":"/content/myloc/about-Abc/community/view-all-community.html",
                     "openNewTab":false,
                     "hideInDesktopNav":true
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"myloc Transformation",
                     "pagePath":"/content/myloc/about-Abc/community/transformation.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Calendar",
                     "pagePath":"/content/myloc/about-Abc/community/Calendar.html",
                     "openNewTab":false
                  }
               ],
               "multiple":true,
               "thirdLevelPageExist":true
            },

         ],
         "columnClass":"0",
         "multiple":true,
         "secondLevelPageExist":true
      },
      {  
         "pageExist":true,
         "pageTitle":"Offices",
         "pagePath":"http://www.yahoo.com",
         "openNewTab":true,
         "hideInDesktopNav":true,
         "hideInTabletNav":true,
         "hideInMobileNav":true,
         "secondLevelChildList":[  
            {  
               "pageExist":true,
               "pageTitle":"Locations",
               "pagePath":"/content/myloc/offices/locations.html",
               "openNewTab":false,
               "thirdLevelChildList":[  
                  {  
                     "pageExist":true,
                     "pageTitle":"Ashburn",
                     "pagePath":"/content/myloc/offices/locations/ashburn.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Austin",
                     "pagePath":"/content/myloc/offices/locations/austin.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Bangalore",
                     "pagePath":"/content/myloc/offices/locations/bangalore.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Denver",
                     "pagePath":"/content/myloc/offices/locations/denver.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Dubai",
                     "pagePath":"/content/myloc/offices/locations/dubai.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Foster City",
                     "pagePath":"/content/myloc/offices/locations/foster-city.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"San Francisco",
                     "pagePath":"/content/myloc/offices/locations/san-francisco.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Miami",
                     "pagePath":"/content/myloc/offices/locations/miami.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Singapore - Singpost",
                     "pagePath":"/content/myloc/offices/locations/singapore-singpost.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Singapore - Robinson Road",
                     "pagePath":"/content/myloc/offices/locations/singapore-robinson-road.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"View All",
                     "pagePath":"http://myloc.trusted.Abc.com/content/myloc/offices/locations.html",
                     "openNewTab":true
                  }
               ],
               "multiple":true,
               "thirdLevelPageExist":true
            },
            {  
               "pageExist":true,
               "pageTitle":"Quick Links",
               "pagePath":"/content/myloc/offices/quick-links.html",
               "openNewTab":true,
               "hideInDesktopNav":true,
               "hideInMobileNav":true,
               "thirdLevelChildList":[  
                  {  
                     "pageExist":true,
                     "pageTitle":"Copy Centers",
                     "pagePath":"/content/myloc/offices/quick-links/copy-centers.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Floor Maps",
                     "pagePath":"/content/myloc/offices/quick-links/floor-maps.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"Food Services",
                     "pagePath":"/content/myloc/offices/quick-links/food-services.html",
                     "openNewTab":false
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"View All",
                     "pagePath":"/content/myloc/offices/quick-links/view-all.html",
                     "openNewTab":false
                  }
               ],
               "multiple":true,
               "thirdLevelPageExist":true
            },
            {  
               "pageExist":true,
               "pageTitle":"Facilities Help",
               "pagePath":"/content/myloc/offices/facilities-help.html",
               "openNewTab":false,
               "thirdLevelChildList":[  
                  {  
                     "pageExist":true,
                     "pageTitle":"Submit Request",
                     "pagePath":"http://servicerequest",
                     "openNewTab":true
                  },
                  {  
                     "pageExist":true,
                     "pageTitle":"View All",
                     "pagePath":"/content/myloc/offices/facilities-help/view-all-facilities-help.html",
                     "openNewTab":false,
                     "hideInDesktopNav":true
                  }
               ],
               "multiple":true,
               "thirdLevelPageExist":true
            },
            {  
               "pageExist":true,
               "pageTitle":"View All",
               "pagePath":"/content/myloc/offices/view-all-offices.html",
               "openNewTab":false,
               "hideInDesktopNav":true,
               "thirdLevelChildList":[  

               ],
               "thirdLevelPageExist":false
            }
         ],
         "columnClass":"3",
         "multiple":true,
         "secondLevelPageExist":true
      },
      {  
         "pageExist":true,
         "pageTitle":"Functions",
         "pagePath":"https://www.google.com",
         "openNewTab":true,
         "hideInDesktopNav":true,
         "hideInTabletNav":true,
         "hideInMobileNav":true,
         "secondLevelChildList":[  

         ],
         "columnClass":"1",
         "multiple":true,
         "secondLevelPageExist":true
      },
      {  
         "pageExist":true,
         "pageTitle":"My HR",
         "pagePath":"/content/myloc/my-hr.html",
         "openNewTab":false,
         "secondLevelChildList":[  

         ],
         "columnClass":"1",
         "multiple":true,
         "secondLevelPageExist":true
      },
      {  
         "pageExist":true,
         "pageTitle":"Tools",
         "pagePath":"/content/myloc/tools.html",
         "openNewTab":true,
         "secondLevelChildList":[  

         ],
         "columnClass":"1",
         "multiple":true,
         "secondLevelPageExist":true
      }
   ]
};
  $scope.showDiv = function(obj){
	$timeout(function(){
	  obj.hovering = true;
	}, 500);
		
  };
  $scope.hideDiv = function(obj){
	$timeout(function(){
	  obj.hovering = false;
	 }, 500);
  };
}]);

.hiding-div{
	display: inline-block;
	padding: 10px;
	margin: 10px;
}

.menu-link{
	text-decoration: none;
}

.menu-link:hover{
	color: #AB09AF;
}

.farm-links{
	position: absolute;
	top: 50px;
	height: 400px;
	width: 700px;
	border: 1px solid lightgrey;
	padding: 5px;
	display: flex;
	word-wrap: flex;
	column-count: 4;
}


.groups-links{
	display: inline-block;
	margin-right: 60px;

}

.group-title{
	color: grey;
	text-decoration: none;
}

.group-links{
	list-style: none;
}

.second-link{
	margin-left: -40px;
}

.second-link > a{
	text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<nav ng-app="topNavApp" ng-controller="navCtrl" class="nav">
  <div class="nav-center">
	<!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> -->
	<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv(obj)" ng-mouseleave="hideDiv(obj)" > 
	  <div>
		<a ng-href="{{obj.pagePath}}" class="main-link multiple menu-link">{{obj.pageTitle}}</a>
		<!--<span class="main-link mobile" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false">{{obj.pageTitle}}</span>-->

		<!--<span ng-repeat="child in obj.secondLevelVoList" class="childNav" ng-show="parentNav">--> 
		<div class="farm-links" ng-show="obj.hovering">
		  <!--<a class="prev-link" aria-labelledby="{{obj.pagetitle}}">{{obj.pageTitle}}</a>-->
		  <div ng-repeat="child in obj.secondLevelChildList" class="groups-links">
			<a ng-href="{{child.pagePath}}" class="group-title">{{child.pageTitle}}</a>
			<!--<span class="group-title mobile" aria-expanded="false">{{child.pageTitle}}</span>-->
			<ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links">
			  <li class="second-link">
				<a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
			  </li>
			</ul>
		  </div>
		</div>
	  </div>
	</div>
  </div>
</nav>

Brian · Accepted Answer · 2017-08-08 17:22:27Z

4

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.

answered Aug 8, 2017 at 17:22

Brian

5,0693 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivz · Accepted Answer · 2017-08-08 17:50:45Z

0

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>

edited Aug 8, 2017 at 17:50

answered Aug 8, 2017 at 17:29

Vivz

6,6282 gold badges19 silver badges34 bronze badges

2 Comments

Brian Over a year ago

You should avoid use of ng-init when able. Why add that complexity? (per docs.angularjs.org/api/ng/directive/ngInit). Other than that, and a count that the question doesn't ask for, this does nothing but add extra logic compared to what I posted.

Vivz Over a year ago

On click of show all the OP wants to show all the list items. I have mentioned in my answer that OPcan either set this variable in controller or using ng-init.

Collectives™ on Stack Overflow

Show a link based on a condition in angularJS

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related