CODEWITHSUNDEEP
javascriptangularjs
karthick S
karthick S

Reputation: 584

Hide and show on button click in angularjs

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?

Upvotes: 3

Views: 2917

Answers (3)

yaswanth
yaswanth

Reputation: 159

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.

Upvotes: 1

Alok Mali
Alok Mali

Reputation: 2881

@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>

Upvotes: 0

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

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>

Upvotes: 2

Related Questions