Nex Nex - 3 months ago 7
AngularJS Question

Angular hide content on link click

I am trying to make a simple app with angular and I can't seem to figure how to hide content when I click links in navigation bar

<body ng-controller="MainCtrl">

<div class="navbar-fixed ">
<nav>
<div class="nav-wrapper teal lighten-1">
<a href="#" class="brand-logo center waves-effect waves-light" ng-click="template='home.html'"><i class="material-icons">dashboard</i></a>
<ul class="left">
<li class="waves-effect waves-light"><a href="#" ng-click="template='discover.html'"><i class="material-icons">search</i></a>
</ul>
<ul class="right">
<li class="waves-effect waves-light"><a href="#" ng-click="template='profile.html'"><i class="material-icons">perm_identity</i></a>


</ul>
</div>
</nav>
</div>

<div ng-hide>
<H1> must not show</H1>
</div>

<div ng-include="template">

</div>
</body>


Main controller:

var app = angular.module('Testing', []);

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});


var classApp = angular.module('classApp', []);

classApp.controller('classCtrl', function ($scope) {
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
});


When I click middle logo I want the content of body in this case "Must not show" should be hidden and display the template I'm using on body. Thanks

Answer

You need to bind the visibility to some scope variable; to show you can use:

<a href="#" class="brand-logo center waves-effect waves-light" ng-click="showTemplate('home.html', true)"><i class="material-icons">dashboard</i></a>

to hide you can use:

 <li class="waves-effect waves-light"><a href="#" ng-click="showTemplate('discover.html', false)"><i class="material-icons">search</i></a>

In your controller you define the function showTemplate like:

$scope.showTemplate = function(templateName, hideContent) {
  $scope.template = templateName;  //template to show
  $scope.hideSection = hideContent;  //true or false to hide/show the content
}

In this function you set the visible template and you hide or how some other section. Then you need to bind the section you want to hide to hideSection variable:

<div ng-hide="hideSection">
    <H1> must not show</H1>
</div>

ng-hide alone without any variable bound will not work