angularJS radio buttons not functioning

Question

I'm having trouble communicating with my angularJS radio buttons. I'm using the material design framework. I'm fairly new to angular.

HTML

<div ng-controller="MainCtrl as ctrl">
    <md-radio-group class="user-type">
        <div layout="row" layout-sm="column" layout-align="space-between" layout-align-sm="space-around center">
            <md-radio-button ng-model="userType" value="prospective" name="user_type" ng-change='newValue(value)'>Prospective Patient</md-radio-button>
            <md-radio-button ng-model="userType" value="patient" name="user_type" ng-change='newValue(value)'>Patient</md-radio-button>
            <md-radio-button ng-model="userType" value="caregiver" name="user_type" ng-change='newValue(value)'> Caregiver </md-radio-button>
            <md-radio-button ng-model="userType" value="doctor" name="user_type" ng-change='newValue(value)'>Doctor</md-radio-button>
        </div>
    </md-radio-group>
</div>

JS

.controller('MainCtrl', ['$scope', function($scope) {
    var self = this;

    $scope.newValue = function(value) {
        console.log(value);
    };

    $scope.$watch('userType', function(value){
        if(value == "patient"){
            console.log(value);
            self.showPatientStepTwo = true;
        }else{
            console.log(value);
            self.showPatientStepTwo = false;
        }

    });
}])

My ng-change isn't firing and my $watch isn't working either. Can anyone find where I'm going wrong? I can't communicate between my controller and view!

Brad Barber · Accepted Answer · 2015-02-19 04:25:04Z

1

When you use the controller as syntax, you should bind to that instead of the scope. I think the md-radio-button directive was creating a child scope that was messing things up but hard to reproduce without that directive.

Here's a plunker with the model and click bound to ctrl instead of $scope: http://plnkr.co/edit/fSTBDAMZLFKJgRD4br9K?p=preview

Radios changed to input, but referencing the ctrl:

<input type="radio" ng-model="ctrl.userType" value="prospective" name="user_type" class="user-type-rdo md-warn md-hue-2" ng-change='ctrl.newValue(value)'>Prospective Patient

And the controller updated to move the newValue function off $scope:

.controller('MainCtrl', ['$scope', function($scope) {
    var self = this;

    this.newValue = function(value) {
        console.log(value);
    };

    $scope.$watch(function(){return self.userType;}, function(value){   
        if(value == "patient"){
            console.log(value);
            self.showPatientStepTwo = true;
        }else{
            console.log(value);
            self.showPatientStepTwo = false;
        }

    });
}])

The newValue function logs undefined - not sure what you were trying to do there, but you can use self.userType in the newValue function if you want the value.

edited Feb 19, 2015 at 4:25

answered Feb 19, 2015 at 4:06

Brad Barber

2,9631 gold badge21 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cerd Over a year ago

I believe he is using angular-material in his use case rather that standard inputs. Also, doesn't hardcoding ctrl.userType in the watch prohibit later use of the same controller in a manner such as ng-controller="MainCtrl as vm"?

Brad Barber Over a year ago

Good point...what's the right way to set up a watch when using controller as?

Tuesdave Over a year ago

I really don't need $watch if I could get my ng-change directive to work, right? I'm just trying to save userType!

cerd · Accepted Answer · 2015-02-19 05:16:37Z

First thing: You don't need to declare an ng-model on ea. angular-material radio button when using radio groups, as per the angular-material docs for radio buttons.

The second thing is, the standard $scope events behave a bit differently when you build your controllers using controllerAs syntax See controllerAs Reference.

function MainController($scope, $log) {
   var vm = this;
   vm.title = 'Some Title';
   vm.showPatientStepTwo = false;

   // does not work
   $scope.$watch('userType', function(newVal, oldVal){
        // do work
   });

   // works  
   $scope.$watch('vm.userType', function(newValue, oldValue) {
       // do work with newValue
   });

   // also works
   $scope.$watch(function() {
      return vm.userType;
   }, function(newValue, oldValue) {
      vm.showPatientStepTwo = newValue === 'patient';
   });
}

Working plunkr: http://plnkr.co/edit/Dth67cQJKarwt3NiE9yp

Dinesh Jain · Accepted Answer · 2015-09-21 20:25:10Z

1

<div class="form-group">
            <label>Type of ad <b class="text-danger">*</b></label><br>
            <input type="radio" name="typeofAd" value="sell" ng-model="product.typeofAd">  I want to sell       
            <input type="radio" name="typeofAd" value="buy" ng-model="product.typeofAd"> I want to buy
          </div>

radio button this way works fine for me

refer link https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms

answered Sep 21, 2015 at 20:25

Dinesh Jain

1491 silver badge11 bronze badges

Comments

webcoder · Accepted Answer · 2017-01-15 14:25:22Z

0

you need to add ng-model and ng-change event like below.

<md-radio-group ng-model="selectedVal" ng-change="showSelected()">

and in your controller you can defined function as following. $scope.showSelected= function(){ console.log($scope.selectedVal); }

edited Jan 15, 2017 at 14:25

answered Jan 15, 2017 at 14:06

webcoder

3111 silver badge8 bronze badges

Collectives™ on Stack Overflow

angularJS radio buttons not functioning

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related