Ng-Model を Angular のラジオ ボタンのリストにバインドする
Web ページのユーザーが複数のオプションから項目を選択した場合、選択した項目をオプションのリストの下に再表示すると、ユーザーは自分の選択を理解するのに役立ちます。 これにより、ユーザーは Web ページで行う次の作業に簡単に進むことができます。
このような Angular の機能は、e コマース Web サイトを開発する場合に理想的です。 選択したアイテムを Web サイトに表示させるには、ng-model を使用してこの機能を実行する方法を見ていきます。
ng-model は Web ページのラジオ ボタンのリストにバインドできます。これらの機能を実行する 2つの異なる方法を学習します。
$scope 関数で ng-model を使用して 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 にコントローラーをバインドするのに役立ちます。
JavaScript コード:
(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';
});
}());
ここ をクリックして、この例で提供されているコードを実行します。
this 関数で ng-model を使用して ng-model を Angular のラジオ ボタンのリストにバインドする
この例と前の例の大きな違いは、コントローラー内で this 関数を宣言し、基本的に $scope 関数を置き換えていることです。
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 関数を宣言します。
JavaScript コード:
(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