CODEWITHSUNDEEP
javascripthtmlangularjs
user6729767
user6729767

Reputation:

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

Upvotes: 0

Views: 1804

Answers (1)

Dario
Dario

Reputation: 6280

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

Upvotes: 1

Related Questions