Angular JS table with ng-repeat and radio buttons

Question

I am trying to make a table using ng-repeat that has a radio button selector at the start of each row. The table looks like this:

<table>
     <tbody>  
         <tr ng-repeat="model in modelList">
              <td>
                 <input type="radio" ng-model="model.select"></input>
              </td>
             <td>{{ model.NDPName }}</td>
             <td>{{ model.OEM }}</td>
             <td>{{ model.version }}</td>
             <td>{{ model.dateAdded }}</td>
             <td>{{ model.validUntil }}</td>
         </tr>
     </tbody>
</table>

The ng-repeat is taking from a modelList that looks like:

    $scope.modelList =
    [
        {
            select: false,
            NDPName: "NDP1",
            OEM: "CHOAM Inc.",
            version: "01",
            dateAdded: "Jan 1, 2013",
            validUntil: "Jan 1, 2014",
        },
        {
            select: false,
            NDPName: "NDP2",
            OEM: "Tyrell Corp.",
            version: "01",
            dateAdded: "Jan 1, 2014",
            validUntil: "Jan 1, 2015",
        },
        {
            select: false,
            NDPName: "NDP3",
            OEM: "Stark Industries",
            version: "01",
            dateAdded: "Jan 1, 2015",
            validUntil: "Jan 1, 2016",
        },
        {
            select: false,
            NDPName: "NDP4",
            OEM: "Monsters Inc.",
            version: "01",
            dateAdded: "Jan 1, 2016",
            validUntil: "Jan 1, 2017",
        },
        {
            select: false,
            NDPName: "NDP5",
            OEM: "ACME Corp",
            version: "01",
            dateAdded: "Jan 1, 2017",
            validUntil: "Jan 1, 2018",
        }
    ];

The problem I am running into is that the radio buttons are not behaving like radio buttons. They are each in a separate scope and will therefore allow multiple rows in the table to be selected. How can I fix this?

FYI, your <input></input> syntax is invalid. If you're using an XHTML doctype, it's <input /> otherwise just <input>. — André Dion
– André Dion, Commented Aug 23, 2013 at 15:10

Kabb5 · Accepted Answer · 2013-08-23 16:18:31Z

14

You need to set a name propertyfor the radio buttons so they will be grouped together.

<input type="radio" name="groupName" ng-model="model.select" />

read about the name property here

edited Aug 23, 2013 at 16:18

answered Aug 23, 2013 at 15:04

Kabb5

3,9003 gold badges36 silver badges57 bronze badges

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

1 Comment

Kabb5 Over a year ago

The simplest fixes are the easiest ones to overlook. Glad to have helped :)

Wagner Francisco · Accepted Answer · 2013-08-23 15:03:38Z

1

You should specify the name tag in the input. Then all the inputs will belong to the same group and will behave as expected:

<input type="radio" name="myGroup" ng-model="model" />

answered Aug 23, 2013 at 15:03

Wagner Francisco

2,2001 gold badge16 silver badges15 bronze badges

1 Comment

Kabb5 Over a year ago

The ng-model should include a dot. See egghead.io/lessons/angularjs-the-dot

Collectives™ on Stack Overflow

Angular JS table with ng-repeat and radio buttons

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related