title: Show a link based on a condition in angularJS
body: <p>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'.</p>
  
  <p>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.</p>
  
  <p>For e.g., on mouse hovering 'about abc', under 'Company', I should see only : 'Strategy', 'Mission, Vision, Values', 'Leadership', 'Org chart' &amp; the 5th link as 'view all'.</p>
  
  <p>How do I achieve this?
  Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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);
    };
  }]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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 &gt; a{
   text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;nav ng-app="topNavApp" ng-controller="navCtrl" class="nav"&gt;
    &lt;div class="nav-center"&gt;
   &lt;!--&lt;li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"&gt; --&gt;
   &lt;div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv(obj)" ng-mouseleave="hideDiv(obj)" &gt; 
     &lt;div&gt;
    &lt;a ng-href="{{obj.pagePath}}" class="main-link multiple menu-link"&gt;{{obj.pageTitle}}&lt;/a&gt;
    &lt;!--&lt;span class="main-link mobile" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false"&gt;{{obj.pageTitle}}&lt;/span&gt;--&gt;
  
    &lt;!--&lt;span ng-repeat="child in obj.secondLevelVoList" class="childNav" ng-show="parentNav"&gt;--&gt; 
    &lt;div class="farm-links" ng-show="obj.hovering"&gt;
      &lt;!--&lt;a class="prev-link" aria-labelledby="{{obj.pagetitle}}"&gt;{{obj.pageTitle}}&lt;/a&gt;--&gt;
      &lt;div ng-repeat="child in obj.secondLevelChildList" class="groups-links"&gt;
     &lt;a ng-href="{{child.pagePath}}" class="group-title"&gt;{{child.pageTitle}}&lt;/a&gt;
     &lt;!--&lt;span class="group-title mobile" aria-expanded="false"&gt;{{child.pageTitle}}&lt;/span&gt;--&gt;
     &lt;ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links"&gt;
       &lt;li class="second-link"&gt;
      &lt;a ng-href="{{subchild.pagePath}}"&gt;{{subchild.pageTitle}}&lt;/a&gt;
       &lt;/li&gt;
     &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>