How to use radio button in angularJS
Radio button selection is apply to angular ng-click event method, this method passing param is $event Object. This $event Object have corresponding radio button properties will return.
Radio Button angular properties
ngModel | string |
It's to angular refer the bind properties
|
value | string |
To get value or set value from the radio button
|
name | string |
Property name of the form radio button.
|
ngChange | string |
To make event from the radio button
|
ngValue | string |
Angular expression value
|
Radio Button Example :
HTML:
<div ng-app="radiobtn">
<div ng-controller="radioController">
Select your favourite food <br/>
<input type="radio" name="fav" ng-model="fav_food" value="curd rice" ng-click="getFood($event)" />curd rice<br/>
<input type="radio" name="fav" ng-model="fav_food" value="lemon rice" ng-click="getFood($event)"/>Lemon rice<br/>
<input type="radio" name="fav" ng-model="fav_food" value="green rice" ng-click="getFood($event)"/>Green rice<br/>
Your favourite food is : {{food}}
</div>
</div>
AngularJS:
var app = angular.module('radiobtn',[]);
app.controller('radioController',['$scope',function($scope){
$scope.getFood = function(obj){
$scope.food = obj.target.value;
}
}]);
Result :
Comments
Post a Comment