Angularjs 行中的 table 个独占单选按钮

Question

我正在使用 angularjs v1.

我希望在每个 table 行中都有专用的单选按钮。每行如下所示；

单选按钮应该是独占的。换句话说，一次只能选择其中一个按钮。当 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

radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group". Only one radio button in a group can be selected at a time.

Angularjs 行中的 table 个独占单选按钮

Angularjs exclusive radio buttons in table row

html

radio-button

tablerow

angularjs