Angularjs表行中的独家单选按钮

Question

我正在使用angularjs v1。

我想在每个表格行中都有独有的单选按钮。每行看起来如下所示;

单选按钮应该是独占的。换句话说，任何时候都只能选择其中一个按钮。按下send radio button info按钮时，应将有关选择了哪个单选按钮的信息发送到angularjs控制器。

这是我的HTML代码;

<div ng-controller="RadioButtonsCtrl">
    <table class="table table-hover data-table sort display">
        <thead>
        <tr>
            <th class="Off_">
                Off
            </th>
            <th class="On_">
                On
            </th>
            <th class="Toggle_">
                Middle
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in radio_button_items">
            <td><input type="radio" ng-model="model.select_off"></td>
            <td><input type="radio" ng-model="model.select_on"></td>
            <td><input type="radio" ng-model="model.select_middle"></td>
            <td>
                <button ng-click="SendInfo(item)">Send radio button info</button>
            </td>
        </tbody>
    </table>

这是控制器代码;

.controller('RadioButtonsCtrl', ['$scope', 
        function ($scope) {
            $scope.SendInfo = function (row) {
                    console.log(row);
                }           
        }])

Answer 1

单选按钮组是通过为它们提供相同的name属性来定义的：

<td><input type="radio" ng-model="model.select_off" name="foo"></td>
<td><input type="radio" ng-model="model.select_on" name="foo"></td>
<td><input type="radio" ng-model="model.select_middle" name="foo"></td>

取自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type

  

收音机：一个单选按钮。您必须使用value属性来定义   此项目提交的价值。使用checked属性指示   是否默认选中此项。 有单选按钮   name属性的相同值在同一个“单选按钮中   组“。一次只能选择组中的一个单选按钮。