时间戳

首页 > 解决方案 > 如何在 md-table 中使用带有 ng-repeat 的 md-radio-group？

javascript - 如何在 md-table 中使用带有 ng-repeat 的 md-radio-group？

问题描述

我正在使用 angularJS 和 md-table 创建一个类似于 Google-Form 的应用程序，并创建我的问卷，我遍历一系列问题，然后遍历可能的答案：

<table md-table flex>
  <thead md-head>
    <tr md-row>
      <th md-column style="width: 99%;"></th>
      <th md-column ng-repeat="option in question.options" style="white-space: nowrap">
        {{option.name}}
      </th>
    </tr>
  </thead>
  <tbody md-body>
    <tr md-row ng-repeat="sub_item in question.sub_items">
      <td style="width: 99%;">{{sub_item.name}}</td>
      <md-radio-group ng-model="sub_item.answer" layout="row">
        <td ng-repeat="answer in question.options">
          <md-radio-button ng-value="{{answer.limit}}"></md-radio-button>
        </td>
      </md-radio-group>
    </tr>
  </tbody>
</table>

但我无法遍历答案，我得到这样的结果： 在此处输入图像描述

并得到错误

Blockquote angular.js:12808 错误：[$compile:ctreq] 控制器“mdRadioGroup”，指令“mdRadioButton”需要，找不到！

我认为当我使用时<td ng-repeat="answer in question.options">我正在创建一个新范围，并且该md-radio-group指令无法识别那些md-radio-button。我怎样才能让它工作？我试图直接迭代md-radio-button's，没有td，但显然在表内不起作用。

标签： javascripthtmlangularjs

解决方案

更换

<tr md-row ng-repeat="sub_item in question.sub_items">
  <td style="width: 99%;">{{sub_item.name}}</td>
  <md-radio-group ng-model="sub_item.answer" layout="row">
    <td ng-repeat="answer in question.options">
      <md-radio-button ng-value="{{answer.limit}}"></md-radio-button>
    </td>
  </md-radio-group>
</tr>

和

<tr md-row ng-repeat="sub_item in question.sub_items">
      <td style="width: 99%;">{{sub_item.name}}</td>
      <td ng-repeat="answer in question.options">
        <md-radio-group ng-model="sub_item.answer" layout="row">
          <md-radio-button ng-value="{{answer.limit}}"></md-radio-button>
        </md-radio-group>
      </td>
    </tr>

...有效。

推荐阅读