Can anyone assist me with an issue I am having with my data table? When I select a radio button, the entire table row is getting selected instead of just the radio button. Below is the code snippet:
https://i.sstatic.net/dicwF.png
My Expectation:
When clicking on a radio button, only the button should be selected and not the entire table row. Demo Any help or insights on this issue would be greatly appreciated.
<md-data-table-container>
<table md-data-table md-row-select="testConfig.selected">
<thead md-trim-column-names md-order="testConfig.order">
<tr>
<th order-by="name">Report Name</th>
<th numeric order-by="views.value">Visits</th>
<th numeric order-by="users.value">Unique Users</th>
<th>Users</th>
</tr>
</thead>
<tbody md-auto-select>
<tr ng-repeat="report in test_data | orderBy: testConfig.order">
<td>{{report.name}}</td>
<td>{{report.views.value}}</td>
<td>{{report.users.value}}</td>
<td>
<ul>
<li ng-repeat="person in people">
<label>
<input type="radio" ng-model="$parent.name" name="name" value="{{person.name}}" required />{{person.name}}
</label>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</md-data-table-container>