The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML markup consists of an HTML DIV and a Button. The HTML DIV has been assigned ng-hide directive. The value of ng-hide directive has been set using the variable IsHidden which is initially set to true and hence the HTML DIV is hidden when page loads.
The Button has been assigned ng-click directive. When the Button is clicked, the ShowHide function of the Controller gets called.
Inside the function, the value of the IsVisible variable is reversed i.e. if it is true then it set to false and vice versa. This makes the HTML DIV toggle when the Button is clicked.
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.IsVisible ? false : true;
}
});
