Radiobutton will not respond to ng-change directive
This question is related to this .
While trying to experiment with the suggestions for these answers, I ran into some problems. I tried to do the same but using the official angular stuff like below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css'>
</head>
<body ng-app="radioDemo1" layout="row">
<div>
<form ng-submit="submit()" ng-controller="AppCtrl">
<div ng-repeat="c in radioData">
<md-radio-group class="choice" ng-required="true" ng-change="radioChanged(account)" ng-model="c.selectedValue" >
<md-radio-button value="Apple" class="md-primary" >Apple</md-radio-button>
<md-radio-button value="Banana" > Banana </md-radio-button>
<md-radio-button value="Mango" >Mango</md-radio-button>
</md-radio-group>
<div>
</form>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<script>
'use strict';
angular
.module('radioDemo1', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.data = {
group1 : '1',
group2 : '2',
group3 : '3'
};
$scope.radioData = [
{ label: '1', value: 1 },
{ label: '2', value: 2 },
{ label: '3', value: '3', isDisabled: true },
{ label: '4', value: '4' }
];
$scope.radioChanged = function (item) {
console.log(item);
if (item.selectedValue == "Apple") {
$scope.admin = item;
}
else if (item == $scope.admin) {
$scope.admin = undefined;
}
};
})
</script>
</body>
</html>
The thing with this code is that my function to check the value of the selected radio button is never called.
Why is this and how can I fix it, so the validation is performed?
+3
source to share
2 answers
It seems like ng-model
and ng-change
are only allowed inside an element md-radio-group
.
Also like overburn , you also have to be careful when using the md model.
So the solution to this problem would be:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css'>
</head>
<body ng-app="radioDemo1" layout="row">
<div>
<form ng-submit="submit()" ng-controller="AppCtrl">
<div ng-repeat="c in radioData">
<md-radio-group class="choice" ng-required="true" ng-change="radioChanged(c)" ng-model="c.selectedValue" >
<md-radio-button value="Apple" class="md-primary" ng-disabled="admin && item != admin">Apple</md-radio-button>
<md-radio-button value="Banana" > Banana </md-radio-button>
<md-radio-button value="Mango" >Mango</md-radio-button>
</md-radio-group>
<div>
</form>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<script>
'use strict';
angular
.module('radioDemo1', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.data = {
group1 : '1',
group2 : '2',
group3 : '3'
};
$scope.radioData = [
{ label: '1', value: 1 },
{ label: '2', value: 2 },
{ label: '3', value: '3', isDisabled: true },
{ label: '4', value: '4' }
];
$scope.radioChanged = function (item) {
console.log(item);
if (item.selectedValue == "Apple") {
$scope.admin = item;
}
else if (item == $scope.admin) {
$scope.admin = undefined;
}
};
})
</script>
</body>
</html>
+3
source to share
You must have the same model on all switches.
Radio buttons are basically an array of values, so if you put different models on them they won't actually change as they only have one possible value.
Try:
<md-radio-group class="choice">
<md-radio-button ng-model="data.group_unique" value="Apple" class="md-primary" ng-change="radioChanged(account)">Apple</md-radio-button>
<md-radio-button ng-model="data.group_unique" value="Banana" ng-change="radioChanged(account)"> Banana </md-radio-button>
<md-radio-button ng-model="data.group_unique" value="Mango" ng-change="radioChanged(account)">Mango</md-radio-button>
</md-radio-group>
+3
source to share