根据angularJS中的条件显示链接 [英] Show a link based on a condition in angularJS
问题描述
我正在AngularJS中创建一个导航栏. 我正在分别在mouseover和mouseleave上的"div.menu-links"上显示和隐藏子菜单"div.farm-links".
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'.
现在,在我的子菜单中,每当'child.thirdLevelChildList.length'大于5时,它应将第5个链接显示为'View all',并隐藏所有其余链接.否则,它应该显示所有链接.
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.
例如,在鼠标悬停在公司"下的大约abc"上时,我应该只能看到:策略",使命,愿景,价值观",领导权",组织结构图"和第五个链接为查看全部".
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>
推荐答案
我相信您需要的是这样:
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>
注意:您在<ul>
上执行了ng-repeat.我假设您要重复列表项,而不是列表(基于thirdLevelChildList中的值,因此我已经实现了.
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.
我使用 limitTo 来防止显示超过4个项目. 我使用 ng-if 仅在大于4时显示显示全部"
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.
这篇关于根据angularJS中的条件显示链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!