Menu
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?
434
asked Apr 15 '26 11:04
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
