MitchVz MitchVz - 7 months ago 17
AngularJS Question

Angular JS table with ng-repeat and radio buttons

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:

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

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?

Answer Source

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

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

read about the name property here