Radio Button Change Event in Angularjs

Its pretty easy to fire a radio button change event in jQuery. We just have to attach the .change event of jQuery using the name of the radio button group.

In HTML we will have a radio-button-group that we want to select from:

</pre>
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">input</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"radio"</code> <code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"radioGroupThing"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"allot"</code> <code class="xml color1">checked</code><code class="xml plain">=</code><code class="xml string">"checked"</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"something"</code><code class="xml plain">>Do Something</code></div>
<div class="line number2 index1 alt1"><code class="xml plain"><</code><code class="xml keyword">input</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"radio"</code> <code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"radioGroupThing"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"transfer"</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"some other thing"</code><code class="xml plain">>So Some Other Thing</code></div>
<pre>

And then we have some jquery code to workout when user changes or selects a radio button from the given group.

$(document).ready(function() {
  $('input:radio[name=radioGroupThing]').change(function() {
  if (this.value == 'something') {
   //do something for something
  }
  else if (this.value == 'some other thing') {
   //do something for some other thing
  }
 });
});

Thats it. Now what if we are using Angularjs and want to achieve same results. In Angularjs we have two angular directives to work it out:
    ng-model directive this will connect your html view to angular controller variable.
    ng-change directive this will attach the event to be fired on change of radio button.

We have to just pass the ng-model using a method which is called on ng-change.
Ok let’s see it in code:

So we will have this html in our angular view(which is HTML actually)

<div ng-controller="MyCtrl">
<input type="radio" ng-model="radio" name="radioGroupThing" id="first" checked="checked" value="something" ng-change='radioChange(radio)'>Do Something
<input type="radio" ng-model="radio" name="radioGroupThing" id="second" value="some other thing" ng-change='radioChange(radio)'>So Some Other Thing
<hr> 
You are doing: <b>{{radio}}<b>
</div>

And then we have a basic angular controller that works behind the above view:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
 $scope.radio= 'something';
 
 $scope.radioChange = function(value) {
 console.log(value);
 }
}

So its nice and easy. Above code is perfectly fiddle ready; why don’t you just try it in jsfiddle or plunkr
Let us know your views in comments.

Advertisements

Say something : I accept all the "Humer&Critic"

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s