表 tr 重复中的角材料 md 单选按钮答案

【问题标题】：Angular material md-radio-button in table tr repeat表 tr 重复中的角材料 md 单选按钮
【发布时间】：2015-11-05 00:03:17
【问题描述】：

我无法在tr 重复中正确使用md-radio-button，是否有任何方法可以在没有md-radio-group 或将md-radio-group 放在tr 上方的情况下使用它，这样所有行中的所有行都相同表。

<form form-submit action="">
    <table>
      <tr ng-repeat="data in data2">
        <td>
    <md-radio-group ng-model="test">
      <md-radio-button  value="{{data.name}}" aria-label="Label {{data.id}}"></md-radio-button>
    </md-radio-group>
        </td>
        <td>{{data.id}}</td>
      </tr>      
    </table>
    <md-button type="submit" class="md-raised">Submit</md-button>
</form>

【问题讨论】：

标签： angularjs html-table angularjs-material

【解决方案1】：

为什么要“不使用md-radio-group”来使用它？在每个 td 元素中重复 md-radio-group 完全没问题。

看到这个working example

【讨论】：

【解决方案2】：

似乎 md-radio-group 输入会破坏标签。您仍然可以通过将单选按钮包装在 a 中并应用 display:table 行来在 CSS 中伪造它

       <table>
        <md-radio-group ng-model="test" class="md-primary">
          <div ng-click="setSelect(data.name)" style="display:table-row" ng-repeat="data in data2">
            <md-radio-button ng-value="data.name">
              {{data.id}}
            </md-radio-button>
          </div>
        </md-radio-group>
      </table>

md-radio-group 似乎也弄乱了标签，因此使用 ng-click 调用包装按钮的简单函数可以解决这个问题

 $scope.setSelect = function(modelVal){
    $scope.test=modelVal;
 }

Example

【讨论】：