Angularjs：如何在 <table> 中使用 <md-radio-button> 和 ng-repeat答案

【问题标题】：Angularjs : How to use <md-radio-button> inside <table> with ng-repeatAngularjs：如何在 <table> 中使用 <md-radio-button> 和 ng-repeat
【发布时间】：2017-04-09 23:19:32
【问题描述】：

我将数据显示为表格。用户必须从表中选择一行。所以我尝试使用<md-radio-button>，但它抛出了一个错误，提示缺少<md-radio-group> 指令。谁能告诉我如何在 ng-repeat 中使用<md-radio-button>？

 <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>

【问题讨论】：

标签： javascript angularjs radio-button angularjs-ng-repeat

【解决方案1】：

您可以完全按照您的方式在表格内使用md-radio-group 和md-radio-button。您的代码不起作用的原因是不遵守"always use a dot rule"。

this is a working example

【讨论】：

发布的工作示例在td 中包含md-radio-group。与包装 <tr ng-repeat="..."> 的 OP 不同。这解决了我的问题

【解决方案2】：

这是代码，

 <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

【讨论】：