AngularJS Radio Buttons
▌Introduction
We are going to make a radio buttons and get the selected
value with angularjs in the following sample.
There are several ways to achieve the goal, however we
can ignore ngClick in this clean way.
▌Environment
l AngularJS 1.5.7
▌Implement : First
version
▋HTML
<div ng-app="app" ng-controller="Ctrl">
<div>
<span ng-repeat="status in StatusOption.Options">
<input type="radio" name="statusRadioButtons" />
<label>{{status.Name}}</label>
</span>
</div>
</div>
|
▋js
angular.module('app', [])
.controller('Ctrl', function ($scope) {
var statuses = [{
'Id': '1',
'Name': 'ALL',
'IsSelected': true
}, {
'Id': '2',
'Name': 'Male',
'IsSelected': false
}, {
'Id': '3',
'Name': 'Female',
'IsSelected': false
}];
$scope.StatusOption = {
'Options': statuses,
};
})
|
Okay, the above codes will generate the following result.
▌Implement : 2 way
binding
We are going to modify the js and heml with ngModel to support 2-way
binding, so that we can get the seleceted value (option’s id).
▋Html
<div ng-app="app" ng-controller="Ctrl">
<div>
<span ng-repeat="status in StatusOption.Options">
<input type="radio" value="{{status.Id}}" ng-model="StatusOption.SelectedId"
<label>{{status.Name}}</label>
</span>
</div>
</div>
|
▋js
We modify
$scope.StatusOption with a new property : “SelectedId”, which is used to be the
ngModel for keeping the value of the selected value of Radio buttons.
$scope.StatusOption = {
'Options': statuses,
'SelectedId': ""
};
|
NOTE!!!! If the
ngModel set to another variable, not inside $scope.StatusOption, the 2-way
binding won’t work! So we have to use
$scope.StatusOption.SelectedId as ngModel.
▌Implement : default
selected
In many cases, the Radio buttons must be initialized with a default
selected radio button.
This can be done with ngChecked.
▋HTML
<div ng-app="app" ng-controller="Ctrl">
<div>
<span ng-repeat="status in StatusOption.Options">
<input type="radio" value="{{status.Id}}" ng-model="StatusOption.SelectedId"
ng-checked="status.Id==StatusOption.DefaultSelectedId" name="statusRadioButtons" />
<label>{{status.Name}}</label>
</span>
</div>
</div>
|
▌Reference
