Show/Hide Div with AngularJs

Most of the web designers are very familiar with Jquery, also they are interested (including me) to do Jquery while in the User Experience. In the angularJs usage is different from Jquery. This tutorial is aimed for very beginners in angular js. Simple method to show/hide div in angular js.

I have added two files that is “index.html” and “maincontroller.js”. See the below code.



index.html

1
2
3
4
5
6
7
8
9
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>

&nbsp;
<div>
<div class="divPane"></div>
<div>Hide</div>
<div>Show</div>
</div>

maincontroller.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var app = angular.module('MyTutorialApp',[]);

app.controller("MainController", function($scope){

$scope.divPane = true;

$scope.hideDiv = function(){

$scope.divPane = false;
};
$scope.showDiv = function(){
$scope.divPane = true;
};

});