■ 참조
https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
■ angularjs에서 체크박스제어는 값은 true/false이나 두번째 체크박스처럼 기본값을 사용자 지정으로 아래의 두번째 체크박스처럼 YES/NO처럼 변경할 수 있다(ng-true-value,ng-false-value). 또한 체크박스 값 변경시 별도 함수를 지정해서 모니터링을 해서 추가 작업을 할 수도 있다(ng-change). 체크박스 활성/비활성화는 ng-disabled를 통해서 제어할 수 있다.
<!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 src='/js/jquery/jquery-1.11.0.min.js'></script> <script> var myApp = angular.module("myApp",[]); myApp.controller("myAppCtrl", function($scope){ $scope.checkboxModel = { value1 : true, value2 : 'YES', value1Disable : false, value2Disable : false }; $scope.value1Change = function() { console.log( "checkbox changed : " + $scope.checkboxModel.value1 ); } $scope.value2Change = function() { console.log( "checkbox changed : " + $scope.checkboxModel.value2 ); } $scope.value2EnableDisable = function() { $scope.checkboxModel.value2Disable = !$scope.checkboxModel.value2Disable; } }); </script> </head> <body ng-controller="myAppCtrl"> <h1>AngularJS ng-disabled(checkbox) 예제</h1> <div> <label>Value1: <input type="checkbox" ng-model="checkboxModel.value1" ng-change="value1Change()" ng-disabled="checkboxModel.value1Disable"> </label><br/> <label>Value2: <input type="checkbox" ng-model="checkboxModel.value2" ng-true-value="'YES'" ng-false-value="'NO'" ng-change="value2Change()" ng-disabled="checkboxModel.value2Disable"> </label> <br/> <font color="red">선택된 값 : <br/> <tt>value1 = {{checkboxModel.value1}}</tt><br/> <tt>value2 = {{checkboxModel.value2}}</tt><br/> </font> </div> <button ng-click="checkboxModel.value1Disable=!checkboxModel.value1Disable">1번 활성/비활성</button> <button ng-click="value2EnableDisable()">2번 활성/비활성</button> </body> </html>
■ 실행 결과
- AngularJS angular.copy 사용법, angular 복사 2019년 5월 17일
- AngularJS fromJson, toJson 사용법 2019년 5월 15일
- AngularJS에서 ng-style사용시 조건문 이용방법 2019년 4월 25일
- AngularJS에서 ng-style사용시 함수 이용방법 2019년 4월 23일
- AngularJS 동적 HTML, Function 추가 2019년 4월 15일
- AngularJS에서 팝업창 띄우기 2019년 4월 2일
- AngularJS 하나의 모듈에 factory 다중 등록 2018년 2월 26일
- AngularJS factory 예제 2018년 2월 26일
- AngularJS forEach ng-repeat 예제 2018년 2월 19일
- AngularJS $http, spring TEXT response 예제 2018년 1월 17일
- AngularJS selectbox 간단한 예제 2018년 1월 15일
- AnuglarJS forEach 예제 2018년 1월 12일
- AngularJS checkbox 제어 및 활성/비활성(ng-disabled) 예제 2018년 1월 8일
- AngularJS button 활성/비활성(ng-disabled) 예제 2018년 1월 8일
- AngularJS radio 활성/비활성(ng-disabled) 예제 2018년 1월 8일
- AngularJS $broadcast, $emit, $on 예제 2018년 1월 3일
- AngularJS – $watch $digest $apply Life Cycle 2017년 12월 26일
- AngularJS $watchCollection 2017년 12월 26일
- AngularJS $watchGroup 2017년 12월 26일
- AngularJS $watch 2017년 12월 26일
- AngularJS 반복문 ng-repeat 2017년 7월 22일
- AngularJS $timeout 2017년 7월 22일
- AngularJS Show/Hide, 보이기/숨기기 2017년 7월 16일
- AngularJS 라디오 버튼 제어 2017년 7월 16일
- AngularJS시작하기, Hello AngularJS 2017년 7월 15일