AngularJS 라디오 버튼 제어

mirinae.maru 0 Comments

■ View(HTML, DOM)에서 라디오버튼 값 초기화하기
ng-init directive로 radio버튼(people)의 값을 2로 초기화 했다. 브라우저에서 2가 선택된 것을 확인할 수 있다.

<!DOCTYPE html>
<html ng-app>
<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>
</head>
<body>
       <h1>View에서 라디오버튼 값 초기화하기</h1>
    <div>
           <div ng-init="people='2'" />
               <input type="radio" ng-model="people" value="1"><label>1</label>
               <input type="radio" ng-model="people" value="2"><label>2</label>
               <input type="radio" ng-model="people" value="3"><label>3</label>
           <ul>
               <li>{{10*people}}€</li>
               <li>{{8*people}}€</li>
               <li>{{30*people}}€</li>
           </ul>
       </div>
</body>
</html>

angular_radio1
 
 
 

■ Controller에서 라디오버튼 값 초기화하기
11번째 라인 $scope.people=”3″;로 radio버튼(people)의 값을 3으로 초기화 했다. 브라우저에서 3이 선택된 것을 확인할 수 있다.

<!DOCTYPE html>
<html ng-app="myRadio">
<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>
var myRadio = angular.module("myRadio",[]);
myRadio.controller("radioCtrl",["$scope", function($scope){
       $scope.people="3";
}]);
</script>
</head>
<body ng-controller="radioCtrl">
       <h1>Controller에서 라디오버튼 값 초기화하기</h1>
    <div>
           <input type="radio" ng-model="people" value="1"><label>1</label>
           <input type="radio" ng-model="people" value="2"><label>2</label>
           <input type="radio" ng-model="people" value="3"><label>3</label>
           <ul>
               <li>{{10*people}}€</li>
               <li>{{8*people}}€</li>
               <li>{{30*people}}€</li>
           </ul>
       </div>
</body>
</html>

angular_radio2
 
 
 

답글 남기기

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