NVG NVG - 14 days ago 5
AngularJS Question

Angularjs : How to use <md-radio-button> inside <table> with ng-repeat

I am displaying data as a table. The user has to select a row from the table. So I tried using

<md-radio-button>
, But it is throwing an error saying
<md-radio-group>
directive is missing. Could anyone tell me how to use
<md-radio-button>
inside with ng-repeat?

<table md-table>
<thead md-head>
<tr>
<td md-cell></td>
<td md-cell>ID</td>
<td md-cell>Demand</td>
<td md-cell>Code</td>
</tr>
</thead md-head>
<tbody md-body>
<md-radio-group ng-model="test" class="md-primary">
<tr md-row ng-repeat="cluster in clusters">
<td md-cell>
<md-radio-button ng-value="cluster.checked"/>
</td>
<td md-cell>{{cluster.id}}</td>
<td md-cell>{{cluster.demand}}</td>
<td md-cell>{{cluster.code}}</td>
</tr>
</md-radio-group>
</tbody>
</table>

Answer

Here is the code,

 <md-divider></md-divider>
  <md-radio-group ng-model="cc.selectedIndex">
    <div ng-repeat='person in cc.contacts' class="row">
      <div flex layout='row' layout-padding layout-align="start center">
        <div flex style="max-width:200px;">
          {{person.Demand}}
        </div>
        <md-radio-button ng-value="person.ID" class="md-primary">
          {{person.Code}}
        </md-radio-button>
      </div>
    </div>
  </md-radio-group>
  <md-divider></md-divider>

DEMO

Comments