AngularJS md-data-table：单选框点击不应触发整行选中求助

问题根源在于md-data-table的行选择逻辑会监听行内的点击事件，而单选按钮（包括其关联的标签）的点击事件会向上冒泡到<tr>元素，从而触发整行选中。解决这个问题的核心是阻止单选按钮区域的点击事件冒泡。

直接修改你的代码，在单选按钮的标签上添加ng-click="$event.stopPropagation()"即可：

<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 ng-click="$event.stopPropagation()">
                <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>

补充说明 #

• $event.stopPropagation()的作用是切断事件向上传递的路径，这样点击单选按钮或标签文字时，事件不会触发父级<tr>的选中逻辑。
• 也可以把这个指令直接加在<input>标签上，但加在<label>上更全面——毕竟用户点击标签文字也会触发单选按钮，同时需要阻止冒泡。

内容的提问来源于stack exchange，提问作者its me