Hide and show on button click in angularjs

Question

I want to hide the value by default and show the value when I click on button for 1st time. When you click on the same button for a 2nd time, it should hide the value instead of displaying. Vice versa it should happen.

Here is my html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>AngularJS</title>
  <script 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"> 
  </script>
  <script th:src="@{/main.js}"></script>   
<head>
<body ng-app="EmployeeManagement" ng-controller="EmployeeController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
 <div ng-show = "IsVisible"> yes </div>
</body>
</html>

here is my JS File:

var app = angular.module("EmployeeManagement", []);
app.controller("EmployeeController", function($scope, $http) {
 $scope.ShowHide = function(){
     $scope.IsVisible =  true;
 }

can anyone tell me how to achieve this scenario?

Saurabh Agrawal · Accepted Answer · 2019-05-28 05:09:46Z

2

You should use negation of $scope.IsVisible on button click. So that if it is visible then it will hide and if it is hide then visible:

Try this:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>AngularJS</title>
  <script 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"> 
  </script>
  <script >
  var app = angular.module("EmployeeManagement", []);
    app.controller("EmployeeController", function($scope, $http) {
    $scope.ShowHide = function(){
        $scope.IsVisible =  !$scope.IsVisible;
    }
  })
 </script>   
<head>
<body ng-app="EmployeeManagement" ng-controller="EmployeeController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
 <div ng-show = "IsVisible"> yes </div>
</body>
</html>

answered May 28, 2019 at 5:09

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sudhir Ojha · Accepted Answer · 2019-05-28 05:50:22Z

1

Instead of a showHide function, the better name would be toggle(). Inside this function instead of setting the $scope.IsVisible = true, you can toggle the value of that variable like !$scope.IsVisible.

edited May 28, 2019 at 5:50

Sudhir Ojha

3,3053 gold badges16 silver badges28 bronze badges

answered May 28, 2019 at 5:12

yaswanth

1599 bronze badges

Comments

Alok Mali · Accepted Answer · 2019-05-28 05:45:20Z

0

@karthick, you can also do it on template end without any interaction of the controller.

  <!DOCTYPE HTML>
  <html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>AngularJS</title>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"> 
    </script>
    <script >
    var app = angular.module("EmployeeManagement", []);
      app.controller("EmployeeController", function($scope, $http) {
    })
  </script>   
  <head>
  <body ng-app="EmployeeManagement" ng-controller="EmployeeController" ng-init="IsVisible=false">
  <input type="button" value="Show Angular" ng-click="IsVisible = !IsVisible"/>
  <div ng-show = "IsVisible"> yes </div>
  </body>
  </html>

answered May 28, 2019 at 5:45

Alok Mali

2,8913 gold badges20 silver badges33 bronze badges

Collectives™ on Stack Overflow

Hide and show on button click in angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related