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

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.

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"?
Good point...what's the right way to set up a watch when using controller as?
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

<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

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

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); }

Collectives™ on Stack Overflow

angularJS radio buttons not functioning

4 Answers 4

3 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Related