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?
3 answers
solution1
1 ACCPTED 2019-05-28 05:09:46
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>
solution2
1 2019-05-28 05:12:34
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 .
solution3
0 2019-05-28 05:45:20
@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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.