In the previous post, we learnt how to work with Check box. In this post, we shall learn how to work with Radio buttons in AngularJS.
In below code snppet, we declared a $scope property named "Gender" and a function named "RadioChange".
<script>
var app = angular.module("app", []);
app.controller("RadioController", function ($scope) {
$scope.Gender = "Male";
$scope.RadioChange = function (s) {
$scope.GenderSelected = s;
};
});
</script>
<div ng-app="app" ng-controller="RadioController">
Select gender
<label><input type="radio" name="SGender" ng-change="RadioChange('Male')" ng-model="Gender" value="Male" /> Male </label>
<label><input type="radio" name="SGender" ng-change="RadioChange('Female')" ng-model="Gender" value="Female" /> Female </label>
<p>
Selected gender: {{ Gender }}
</p>
<p>
You have clikced on <b>{{GenderSelected}}</b>
</p>
</div>
In the HTML block, we have two radio buttons with following
In the last we have written both "Gender" and "GenderSelected" $scope proeprty on the page.
Output
Views: 51883 | Post Order: 50