Ng-모델을 Angular의 라디오 버튼 목록에 바인딩
웹 페이지 사용자가 여러 옵션에서 항목을 선택할 때 옵션 목록에서 선택한 항목을 다시 표시하면 사용자가 자신의 선택을 이해하는 데 도움이 됩니다. 이를 통해 사용자는 웹 페이지에서 다음 작업으로 쉽게 이동할 수 있습니다.
이와 같은 Angular 기능은 전자 상거래 웹 사이트를 개발할 때 이상적입니다. 선택한 항목을 웹사이트에 표시하려면 ng-model을 사용하여 이 기능을 수행하는 방법을 살펴보겠습니다.
ng-model은 웹 페이지의 라디오 버튼 목록에 바인딩될 수 있으며 이러한 기능을 수행하는 두 가지 다른 방법을 배웁니다.
ng-model을 $scope 기능과 함께 사용하여 ng-model을 Angular의 라디오 버튼 목록에 바인딩
이 간단한 예제는 index.html에서 ng-model을 정의합니다. HTML 코드는 다음과 같습니다.
HTML 코드:
<!DOCTYPE html>
<hmtl ng-app="testApp">
<head>
<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://
code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<form>
<div ng-repeat="option in occurrenceOptions track by $index">
<input type="radio" name="occurrences" ng-value="option"
ng-model="model.selectedOccurrence" />
<label>{{ option }}</label>
</div>
</form>
<div>The selected value is : {{ model.selectedOccurrence }}</div>
</body>
그런 다음 script.js 파일에서 컨트롤러 내부의 $scope 기능을 실행합니다. $scope는 ng-model에 대한 코딩을 수행한 HTML에 컨트롤러를 바인딩하는 데 도움이 됩니다.
자바스크립트 코드:
(function () {
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.occurrenceOptions = [];
$scope.occurrenceOptions.push('previous');
$scope.occurrenceOptions.push('current');
$scope.occurrenceOptions.push('next');
$scope.model = {};
$scope.model.selectedOccurrence = 'current';
});
}());
이 예제에서 제공하는 코드를 실행하려면 여기를 클릭하세요.
ng-model을 this 기능과 함께 사용하여 ng-model을 Angular의 라디오 버튼 목록에 바인딩합니다.
이 예제와 이전 예제의 중요한 차이점은 기본적으로 $scope 함수를 대체하여 컨트롤러 내부에서 this 함수를 선언한다는 것입니다.
index.html의 ng-repeat 측면을 약간 변경하면 아래 코드와 같이 표시됩니다.
HTML 코드:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://
code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController as vm">
<form>
<div ng-repeat="option in vm.occurrenceOptions">
<input type="radio" name="occurrence" ng-value="option" ng-model="vm.
selectedOccurrence" />
<label>{{ option }}</label>
</div>
</form>
<div>The selected value is : {{ vm.selectedOccurrence }}</div>
</body>
그런 다음 script.js에서 컨트롤러 내부에 this 함수를 선언합니다.
자바스크립트 코드:
(function () {
var app = angular.module('testApp', []);
app.controller('testController', function () {
var vm = this;
vm.occurrenceOptions = [];
vm.occurrenceOptions.push('previous');
vm.occurrenceOptions.push('current');
vm.occurrenceOptions.push('next');
vm.selectedOccurrence = 'current';
});
})();
이 예제에서 사용된 코드를 실행하려면 여기를 클릭하십시오.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn