How to hide a div with angular js ng-hide
Question
I have a page with a div which contains a jumbotron, this is the first page that is display anytime the site is accessed. On this page I have some links which link to different pages using the '$routeProvide'/angular. I want to hide the jumbotron from the other links/pages but I am not sure how to do that.
main page :
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header col-md-12 col-sm-12 logo">
<a href="index.html"><img src="img/gilgal.png" class="img-responsive center-block" alt="Responsive image"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="container-fluid col-md-9 col-sm-12 hidden-xs col-md-offset-2">
<ul class="nav navbar-nav" id="navbar">
<li class="navlink"><a href="#/about">About Us</a></li>
<li class="navlink"><a href="#/advService">Advisory Service</a></li>
<li class="navlink"><a href="#/imService">Investment Service</a></li>
<li class="navlink"><a href="#/greService">Infrastructure Development</a></li>
<li class="navlink"><a href="#/contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="jumbotron" ng-hide="hideme">
<div class="container-fluid">
<div class="row jumb">
<div class="col-md-4 col-md-offset-1 head-card">
<h4 class="head-text">ADVISORY SERVICES</h4>
<p class="head-desc">We provide Corporate Finance Advisory Services for private and public institutions in Sub-Saharan Africa</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 head-card">
<h4 class="head-text">INVESTMENT MANAGEMENT SERVICES</h4>
<p class="head-desc">We focus on Real Estate and Infrastructural Projects in Sub-Saharan Africa</p>
</div>
</div>
</div>
</div>
<div ng-view>
</div>
<div class="container-fluid col-md-12 foot">
<p class="col-md-offset-1">All content copyright of Gilgal Capital Limited 2015 | Branding and Website by Ashebby</p>
</div>
<!-- Angular Route.js -->
<script src="js/angular-route.min.js"></script>
<!-- Angular.js -->
<script src="js/angular.min.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</div>
</body>
here is my script.js
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/index',{
templateUrl: 'index.html'
})
.when('/about',{
templateUrl: 'about.html'
})
.when('/advService',{
templateUrl: 'advService.html'
})
.when('/imService',{
templateUrl: 'imService.html'
})
.when('/greService',{
templateUrl: 'greService.html'
})
.when('/contact',{
templateUrl: 'contact.html'
});
});
app.controller('cfgController'['$Scope', function($scope) {
$Scope.hideme = false;
$Scope.$on('$locationChangeStart', function(event) {
$scope.hideme = true;
});
}]);
here is a typical link to a different page about.html :
<div class="container-fluid col-md-12 about-us">
<div class="about-us col-md-offset-1">
<h2 class="col-md-10">
<span class="title2">About Us</span>
<div class="line"></div>
</h2>
<p class="col-md-10 article">text</p>
</div>
</div>
2 answers
solution1
0 ACCPTED 2015-06-12 11:57:43
Is that really hard... So ng-hide is easy to use
To hide a div just do this :
<div ng-hide="hideme">your content </div>
and in your controller you define hideme variable like this :
$scope.hideme = true; // true to hide ,false to show
Edit: So in your case do this :
<li class="navlink"><a ng-click="hideIt()" href="#/about">About Us</a></li>
In your controler make a fucntion hideIt to hide the jumbotron div :
$scope.hideIt = function(){
$scope.hideme = true;
}
solution2
0 2015-06-12 12:11:28
app.run(['$rootScope', function($rootScope) {
$rootScope.hideme = false;
$rootScope.$on('$routeChangeStart', function(){
$rootScope.hideme = true;
});
Along with your code, just add this run block. It should work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.