javascript - 带单选按钮的 Angular 重复表行

Question

我有一个 Angular 应用程序，它可以使用 ng-repeat 生成单选按钮表。我希望能够单击表行或单选按钮本身来选择它并将值存储在某处。问题是它仅在我选择单选按钮时有效，而不是在我单击该行时有效。此外，我希望在任何给定时间只能选择 1 个单选按钮。这是我的 html:

<tr class="info" ng-repeat="id in ctrl.ids"
    ng-click="id.isChecked=!id.isChecked;
    ctrl.toggleSelectedRow($event, id)">
    <td>
        <input  type="radio"
                ng-model="id.isChecked"
                ng-click="ctrl.toggleSelectedRow($event, id)"/>
        <a>{{id}}</a>
    </td>
</tr>

这是我的 Angular 代码:

var app = angular.module('myApp',[]);

var selectedRow;

MyCtrl.prototype.toggleSelectedRow = function($event, selectedId) {
    var _this = this;
    $event.stopPropagation();
    selectedRow = selectedId;
};

MyCtrl.$inject = ['$scope', '$log', '$http', '$sce'];
app.controller('MyCtrl', MyCtrl);

当我运行此代码时，即使我使用 stopPropagation()，所有单选按钮都会被选中。单击表行而不是单选按钮可以保存信息，但不会选择单选按钮供用户查看。知道我做错了什么吗？

编辑 1:这是 plunker这重现了我的问题。除了当您单击表格行时选择单选按钮而不是直接选择单选按钮之外，我几乎已经完成了所有工作。

Answer 1

要通过单击表行来切换单选按钮，您只需在表行 <tr> 上添加一个单击处理程序即可。我用以下代码编辑了你的 plunker:

<tr ng-repeat="item in main.items" ng-click="main.selectedItem=item">

可以找到您的插件的更新版本 here .