AngularJS Show/Hide, 보이기/숨기기

■ 토글방식 보이기/숨기기
11번째 라인에서 showHide의 값이 true이므로 18번째 라인의 div의 ng-show값이 true가 되어서 div의 내용이 보이게 된다. Show/Hide버튼을 클릭하게 되면 showHide의 값이 false, ng-show값이 false 가 되어서 div의 내용이 보이지 않게 된다. 버튼을 클릭하게 되면 showHide=!showHide가 showHide값을 반전(?)시켜서 div가 보기기/숨기기가 구현된다.

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myAppCtrl",["$scope", function($scope){
       $scope.showHide = true;
}]);
</script>
</head>
<body ng-controller="myAppCtrl">
       <h1>토글방식 보이기/숨기기 <br><font color="red">ng-click="showHide=!showHide"</font></h1>
       <button ng-click="showHide=!showHide">Show/Hide</button>
    <div ng-show="showHide">Show/Hide 보이기/숨기기</div>
</body>
</html>

angularjs_show_hide_보이기_숨기기_토글방식
 
 
 

■ 함수방식 보이기/숨기기
11번째 라인에서 showHide값이 true이므로 div가 보인다. 버튼을 클릭하면 showHideToggle함수를 호출해서 showHide값을 true이면 false로, false이면 true로 변경되어서 div가 보이기/숨기기가 구현된다.

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myAppCtrl",["$scope", function($scope){
       $scope.showHide = true;
       $scope.showHideToggle = function() {
              if($scope.showHide==true) {
                     $scope.showHide=false;
              }
              else {
                     $scope.showHide=true;
              }
       };
}]);
</script>
</head>
<body ng-controller="myAppCtrl">
       <h1>함수방식 보이기/숨기기 <br><font color="red">ng-click="showHideToggle()"</font></h1>
       <button ng-click="showHideToggle()">Show/Hide</button>
    <div ng-show="showHide">Show/Hide 보이기/숨기기</div>
</body>
</html>

angularjs_show_hide_보이기_숨기기_함수방식