AngularJS에서 ng-show, ng-hide 속성을 사용하여 화면요소를 동적으로 보이고 감추는 예제를 구현한다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다.
<div ng-app="myApp" ng-controller="myCtrl">
lastName은 ng-show 속성을 만들었고 firstName은 ng-hide 속성을 만들었다. ng-show 속성은 true일 때 보이고 false 일 때 안 보인다. ng-hide 속성은 true일때 감추고 false 일 때 표시된다.
<input type="text" ng-model="lastName" ng-show="isShow">
<input type="text" ng-model="firstName" ng-hide="isHide">
컨트롤러에 다음과 같이 isShow, isHide 값을 정의했다.
$scope..isShow = false;
$scope..isHide = true;
$scope..toggle = function() {
$scope.isShow = !$scope.isShow;
$scope.isHide = !$scope.isHide;
}
toggle() 함수가 호출되면 isShow, isHide의 값은 true와 false로 전환된다.
<button ng-click="toggle()">Toggle</button>
예제의 전체코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.lastName = "Joo"
$scope.firstName = "HanGil",
$scope.isShow = false;
$scope.isHide = true;
$scope.toggle = function() {
$scope.isShow = !$scope.isShow;
$scope.isHide = !$scope.isHide;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="toggle()">Toggle</button>
<p>
isShow : {{isShow}}<br>
Last Name : <input type="text" ng-model="lastName" ng-show="isShow"><br> <br>
isHide : {{isHide}}<br>
First Name : <input type="text" ng-model="firstName" ng-hide="isHide"><br> <br>
Full Name : {{lastName + firstName}}<br>
</p>
</div>
<hr>
</body>
</html>
첫 화면에는 LastName 은 ng-show="false"이고 FirstName 은 ng-hide="true" 여서 둘 다 보이지 않는다.
Toggle 버튼을 클릭하면 toggle() 함수가 실행되어 LastName 은 ng-show="true"가 되고 FirstName 은 ng-hide="false"가 되어서 둘 다 화면에 표시된다.
입력항목에 값을 입력하면 바로 화면 아래에 표시된다.
Toggle 버튼을 다시 클릭해서 항목을 감추어도 ng-model 속성에 주어진 값은 그대로 유지된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] 폼 입력항목 AngularJS의 유효성검사 (0) | 2023.02.22 |
|---|---|
| [AngularJS] 폼에서 angular.copy() 함수를 사용하여 reset 기능구현 (0) | 2023.02.22 |
| [AngularJS] ng-disabled 속성으로 버튼을 활성화/비활성화 (0) | 2023.02.22 |
| [AngularJS] $http 서비스로 받아온 데이터에 필터를 적용해보자. (0) | 2023.02.22 |
| [AngularJS] $http 서비스를 이용하여 json을 갖고와 표시해보자. (0) | 2023.02.22 |
댓글