Menu
This question is linked to this.
While trying to experiment with the suggestions on these answers, I ran into some trouble. What I tried to do is do the same thing but using the official angular material example as can be seen 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 for checking the value of the selected radio button never gets called.
Why is that, and how can I fix this, so the check does get performed?
763
It seems that ng-model and ng-change are only allowed inside an md-radio-group element.
Also as overburn said you have to also be careful when using md-model.
Thus the solution to this issue 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With