AngularJS checkbox 제어 및 활성/비활성(ng-disabled) 예제

■ 참조
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>

 
 
 

■ 실행 결과