根據angularJS中的條件顯示鏈接

我在AngularJS中創建導航欄。我在'div.menu-links'上分別顯示和隱藏鼠標懸停和鼠標滑輪上的子菜單'div.farm-links'。根據angularJS中的條件顯示鏈接

現在，在我的子菜單中，每當'child.thirdLevelChildList.length'大於5時，它應該顯示第5個鏈接爲'View all'，並隱藏所有剩餘的鏈接。否則，它應該顯示所有的鏈接。

例如，當鼠標懸停'關於abc'時，在'公司'下，我應該只看到：'策略'，'任務，願景，價值觀'，'領導力'，'組織圖'&第五鏈接'查看全部'。

我該如何做到這一點？這裏是我的代碼：

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>

來源

2017-08-08 Sunny

我相信你需要的是這樣的：

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

注意：您曾NG-重複上<ul>。我假設你想重複列表項，不在名單（基於thirdLevelChildList的值，所以我以這種方式實現的。

我用limitTo防止超過4個項目無法顯示。我用ng-if只顯示「顯示所有」，如果大於4

來源

2017-08-08 17:22:27 Brian

您可以使用limitTo來和可變保持的列表項的數目的計數。您可以在控制器中設置此變量或使用ng-init像下面

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

來源

2017-08-08 17:29:33 Vivz

你應該避免使用ng-init當BLE。爲什麼要增加複雜性？（根據https://docs.angularjs.org/api/ng/directive/ngInit）。除此之外，還有一個問題沒有要求的計數，這隻會增加額外的邏輯，與我發佈的內容相比。 – Brian

點擊顯示所有OP想要顯示所有列表項。我在我的回答中提到，OPcan可以在控制器中設置該變量或使用ng-init。 – Vivz

根據angularJS中的條件顯示鏈接

回答

相關問題