AngularJS에서 ng-disabled 속성을 사용하여서 동적으로 버튼의 활성화 상태를 변경한다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
div 태그에 ng-app 속성을 만들고 "" 으로 정의하고 ng-init 속성에 값을 "mySwitch=true" 로 정의한다.
<div ng-app="" ng-init="mySwitch=true">
버튼1은 활성화 상태로 표시되고 버튼2는 비활성화 상태로 표시되는 일반적인 버튼이다.
<button>버튼1</button>
<button disabled>버튼2</button>
버튼3은 ng-diabled 속성을 만들고 값을 "mySwich"로 정의하였다. ng-init에 "mySwitch=true" 로 초기설정이 되어있어 처음에 표시될 때는 버튼3은 비활성화 상태로 표시된다.
<button ng-disabled="mySwitch">버튼3</button>
체크박스항목에 ng-model 속성을 만들고 "mySwitch"로 값을 지정했다. 체크박스 선택여부에 따라 ng-model 속성의 "mySwitch" 값이 바뀌고 그에 따라 버튼3 속성이 토글된다.
<input type="checkbox" ng-model="mySwitch" />비활성화
예제의 전체코드이다.
<!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>
</head>
<body>
<div ng-app="" ng-init="mySwitch=true">
<p>
<button>버튼1</button>
<button disabled>버튼2</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch" />비활성화
<button ng-disabled="mySwitch">버튼3</button>
</p>
<p>{{ mySwitch }}</p>
</div>
<hr>
</body>
</html>
아래와 같이 화면에 표시된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] 폼에서 angular.copy() 함수를 사용하여 reset 기능구현 (0) | 2023.02.22 |
|---|---|
| [AngularJS] ng-show, ng-hide 속성으로 화면요소를 보이기/감추기 (0) | 2023.02.22 |
| [AngularJS] $http 서비스로 받아온 데이터에 필터를 적용해보자. (0) | 2023.02.22 |
| [AngularJS] $http 서비스를 이용하여 json을 갖고와 표시해보자. (0) | 2023.02.22 |
| [AngularJS] 출력된 목록에 필터(Filter)를 적용해보자. (0) | 2023.02.22 |
댓글