0

I am using angularjs v1.

I would like to have exclusive radio buttons in each table row. Each row will look something like below;

enter image description here

The radio buttons should be exclusive. In other words, only 1 of the buttons can be selected at any one time. When the send radio button info button is pressed, information regarding which radio button is selected should be sent to the angularjs controller.

Here is my html code;

<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>

Here is the controller code;

.controller('RadioButtonsCtrl', ['$scope', 
        function ($scope) {
            $scope.SendInfo = function (row) {
                    console.log(row);
                }           
        }])
1
  • give a nameprop to each radio button in a row Commented Nov 29, 2016 at 10:09

1 Answer 1

2

Radio button groups are defined by giving them the same name attribute:

<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>

Taken from 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.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.