Online Snippets Library

Create toggle effect in Html elements using AngularJS

To Create toggle effect in Html elements using AngularJS, we will use ngHide directive of AngularJS.

AngularJS ngHide directive is used to shows or hides the given HTML element based on the expression provided to the ngHide attribute.

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
</head>
<body>
<div ng-app="toggleApp" ng-controller="toggleController">
<input type="button" value="Toggle Div" ng-click="ShowHide()" />
<br>
<br>
<div ng-hide="IsHidden">My DIV</div>
</div> 
</body>
</html>
JavaScript
var app = angular.module('toggleApp', [])
app.controller('toggleController', function ($scope) {
//hide the DIV by default.
$scope.IsHidden = true;
$scope.ShowHide = function () {
//If DIV is hidden it will be visible and vice versa.
$scope.IsHidden = $scope.IsHidden ? false : true;
 }
});