Question

我有一个角度应用程序，它会生成一个带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>

这是我的角度代码：

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

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

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

可以找到您的plunker的更新版本here。

Answer 2

您必须将名称属性添加到单选按钮。那么你没有问题，选择了多个元素

<input  type="radio"
                name="myRadioButton"
                ng-model="id.isChecked"/>

你想在函数toggleSelectedRow（）中做什么？

如果您已完成选择，则可以循环访问数组ids并获取选中的项目。然后你不必调用某个函数。

角度重复表行与单选按钮

2 个答案: