Angular JS table with ng-repeat and radio buttons

Question

I am trying to create a table using ng-repeat, which has a radio button switch at the beginning 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> 

ng-repeat takes from modelList, which looks like this:

  $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 facing is that switches do not behave like switches. Each of them is in a separate area and therefore allows you to select multiple rows in the table. How can i fix this?

Answer 1

You need to set the name property for the switches so that they are grouped together.

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

read about name name here

Answer 2

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

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