Afficher un lien basé sur une condition dans angularJS

Question

Je crée une barre de navigation dans AngularJS. Je montre et masque le sous-menu 'div.farm-links' sur mouseover et mouseleave respectivement sur 'div.menu-links'. Maintenant, dans mon sous-menu chaque fois que 'child.thirdLevelChildList.length' est supérieur à 5, il devrait afficher le 5ème lien comme 'Afficher tout' et cacher tous les liens restants. Sinon, il devrait montrer tous les liens. Par exemple, sur la souris planant 'sur abc', sous 'Société', je devrais voir seulement: 'Stratégie', 'Mission, Vision, Valeurs', 'Leadership', 'Organigramme' & le 5ème lien comme 'Voir tout'.

Comment puis-je y parvenir? Voici mon 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){ 
 
\t $timeout(function(){ 
 
\t obj.hovering = true; 
 
\t }, 500); 
 
\t \t 
 
    }; 
 
    $scope.hideDiv = function(obj){ 
 
\t $timeout(function(){ 
 
\t obj.hovering = false; 
 
\t }, 500); 
 
    }; 
 
}]);

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

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

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

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

 

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

 
} 
 

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

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

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

 
.second-link > a{ 
 
\t 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"> 
 
\t <!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> --> 
 
\t <div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv(obj)" ng-mouseleave="hideDiv(obj)" > 
 
\t <div> 
 
\t \t <a ng-href="{{obj.pagePath}}" class="main-link multiple menu-link">{{obj.pageTitle}}</a> 
 
\t \t <!--<span class="main-link mobile" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false">{{obj.pageTitle}}</span>--> 
 

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

Answer 1

Je crois que ce dont vous avez besoin est ceci:

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

Remarques: Vous aviez ng-répétition <ul>. Je suppose que vous vouliez répéter les éléments de liste, pas la liste (sur la base des valeurs thirdLevelChildList, donc je l'ai mis en œuvre de cette façon.

J'utilise le limitTo pour éviter plus de 4 articles de montrer. J'utilise ng-if seulement afficher « Tout afficher » si elle est supérieure à 4.

Answer 2

Vous pouvez utiliser limitTo pour et une variable pour tenir compte du nombre d'éléments de la liste. Vous pouvez définir cette variable dans le contrôleur ou en utilisant ng-init comme ci-dessous

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