AngularJS radio 활성/비활성(ng-disabled) 예제

mirinae.maru 0 Comments

■ 아래의 세개의 라디오 버튼중에서 첫번째 라디오버튼은 비활성화($scope.data.disable1=true), 나머지 2개($scope.data/disable2=false)는 활성화 되어 있다. 아래의 ‘1번 활성화’ 버튼을 클릭하면 $scoe.enable1() 함수가 1번 라디오 버튼을 활성화시키고, ‘3번 비활성화’버튼을 클릭하면 $scope.disable3() 함수가 3번 라디오 버튼을 비활성화 시킨다.

 
 
 

<!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.data = {
    disable1: true,
    disable2: false,
    disable3: false,
    people : 2
  }
       
  $scope.enable1 = function() {
    $scope.data.disable1 = false;
  }
       
  $scope.disable3 = function() {
    $scope.data.disable3 = true;
  }
});
</script>
</head>
<body ng-controller="myAppCtrl">
<h1>AngularJS ng-disabled(radio) 예제</h1>
<font color="red">
선택된 값 : {{data.people}}
</font>
<div>
  <input type="radio" ng-model="data.people" value="1" ng-disabled="data.disable1"><label>1</label><br/>
  <input type="radio" ng-model="data.people" value="2" ng-disabled="data.disable2"><label>2</label><br/>
  <input type="radio" ng-model="data.people" value="3" ng-disabled="data.disable3"><label>3</label>
</div>
<button ng-click="enable1()">1번 활성화</button>
<button ng-click="disable3()">3번 비활성</button>
</body>
</html>

 
 
 

■ 실행 결과

 
 
 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다