Скрыть и показать по нажатию кнопки в angularjs - PullRequest
Новая
       3

Скрыть и показать по нажатию кнопки в angularjs

3 голосов
/ 28 мая 2019

Я хочу скрыть значение по умолчанию и показать значение, когда я нажимаю кнопку в первый раз.Когда вы нажимаете на ту же кнопку во второй раз, она должна скрывать значение вместо отображения.И наоборот, это должно произойти.

Вот мой 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>

, вот мой JS-файл: 

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

Может кто-нибудь сказать мне, как добиться этого сценария?

Ответы [ 3 ]

1 голос
/ 28 мая 2019

Вместо функции showHide лучшим названием будет toggle().Внутри этой функции вместо установки $scope.IsVisible = true вы можете переключать значение этой переменной, например !$scope.IsVisible.

1 голос
/ 28 мая 2019

Вы должны использовать negation из $scope.IsVisible при нажатии кнопки.Так что, если он виден, он будет скрыт, а если он скрыт, то виден:

Попробуйте: 

<!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>
0 голосов
/ 28 мая 2019

@ karthick, вы также можете сделать это в конце шаблона без какого-либо взаимодействия с контроллером. 

  <!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...