728x90
반응형
Angular1에서 라디오 선택에 따라 입력 창의 텍스트를 변경하는 간단한 예제를 들어 설명 드리겠습니다.
아래는 프로토콜 종류 라디오를 선택함에 따라, 연결할 포트 정보를 변경하는 예제입니다.
<!DOCTYPE html>
<html ng-app="radioApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
angular.module('radioApp', [])
.controller('RadioboxController', function($scope) {
$scope.protocol_type = 'SSL';
$scope.protocol_port = 465;
$scope.updateProtocolType = function() {
if ($scope.protocol_type === "SSL") {
$scope.protocol_port = 465;
}
else if ($scope.protocol_type === "TLS") {
$scope.protocol_port = 587;
}
};
});
</script>
</head>
<body ng-controller="RadioboxController">
<h2>Angular1 라디오 예제</h2>
<label><input type="radio" ng-model="protocol_type" value="SSL" ng-change="updateProtocolType()">SSL</label>
<label><input type="radio" ng-model="protocol_type" value="TLS" ng-change="updateProtocolType()">TLS</label>
<label><input type="radio" ng-model="protocol_type" value="None" ng-change="updateProtocolType()">None</label>
<br><br>
<input type="text" ng-model="protocol_port">
</body>
</html>
위 예제의 주요 부분에 대한 설명은 다음과 같습니다.
- Angular1 애플리케이션과 컨트롤러를 정의합니다. : "ng-app", "ng-controller"
- protocol_type 변수로 사용자가 선택한 프로토콜을 입력 받습니다.
- protocol_port 변수로 입력 창의 프로토콜 포트 번호를 변경합니다.
- updateInputText() 함수는 선택한 프로토콜에 따라 protocol_port를 갱신합니다.
- HTML에서 라디오와 입력 창을 생성하고, 앵귤러 디렉티브를 사용하여 컨트롤러와 연결합니다.
이 코드를 HTML 파일로 저장하고 웹 브라우저에서 열면, 프로토콜의 종류를 선택(라디오를 선택하거나 해제)할 때 포트번호(입력 창의 텍스트)가 변경되는 것을 확인할 수 있습니다.
'프로그래밍 > 웹 관련' 카테고리의 다른 글
| Mixed content 문제 해결 방법 (0) | 2021.10.20 |
|---|---|
| javascript FORM 태그 시리얼라이징 (0) | 2021.10.01 |
| [javascript] CanvasRenderingContext2D.arc() 함수에 대하여 (0) | 2021.06.06 |
| [javascript] drawImage()로 이미지 회전하여 출력하기 (0) | 2021.06.05 |
| [javascript] NaN (Not a Number), isNaN(), Number.isNaN() 에 대하여 (0) | 2021.05.27 |