根据angularJS中的条件显示链接 [英] Show a link based on a condition in angularJS

查看:80
本文介绍了根据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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆