top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How do you hide an HTML element via a button click in AngularJS?

0 votes
290 views
How do you hide an HTML element via a button click in AngularJS?
posted Jan 7, 2017 by Kavyashree

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

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;
}
});







My DIV



answer Jan 10, 2017 by Navya
...