Get dynamic values from Angular-Material md-radio-group
Situation: Advanced Angular-Material Form with multiple elements, each having radio groups (basic but complete setup)
Setup: Angular, Angular-Material, “md-radio-group”, “controller as”
Output: console.log selected radio options
<form name="myForm" ng-controller="DataController as data" ng-submit="submit(data)" novalidate ng-cloak>
<table>
<thead>
<tr>
<th rowspan="2">SOLUTIONS</th>
<th colspan="3">EVALUATIONS PLANNED</th>
</tr>
<tr>
<th>CONDUCTING RESEARCH</th>
<th>PLAN FIRST-TIME IMPLEMENTATION</th>
<th>PLAN TO REPLACE EXISTING SOLUTION</th>
</tr>
</thead>
<tbody ng-repeat="data in data.solutions">
<tr>
<td colspan="4">{{data.name}}</td>
</tr>
<tr ng-repeat="item in data.solutions">
<td>{{ item.product }}</td>
<td colspan="3">
<md-radio-group ng-model="value" ng-change="onChangeNeed(value)">
<md-radio-button value="{{ item.product }} Conducting" aria-label="{{ item.product }} Conducting">Conducting</md-radio-button>
<md-radio-button value="{{ item.product }} Planning" aria-label="{{ item.product }} Planning">Planning</md-radio-button>
<md-radio-button value="{{ item.product }} Replacing" aria-label="{{ item.product }} Replacing">Replacing</md-radio-button>
</md-radio-group>
</td>
</tr>
</tbody>
</table>
</form>
$scope.onChangeNeed = function(value) {
console.log(value);
};
JSON DATA (Example – in controller for example)
vm.solutions = [{
"name": "Core System",
"solutions": [
{ "product": "Core System" },
{ "product": "Core System Evaluation" },
{ "product": "Outsourcing" },
{ "product": "Operational Assessments" },
{ "product": "Customization Assistance" },
{ "product": "Internal Security Monitoring" },
{ "product": "Internal Help Desk" }
]
}, {
"name": "Call Center Solution",
"solutions": [
{ "product": "Call Center Solutions" },
{ "product": "In-House Call Center Automation" },
{ "product": "Outsourced Call Center Services" }
]
}];