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.


<!DOCTYPE html>
<script src="//"></script>
<div ng-app="toggleApp" ng-controller="toggleController">
<input type="button" value="Toggle Div" ng-click="ShowHide()" />
<div ng-hide="IsHidden">My DIV</div>
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;