Angular JS highlight row based on radio button state

Question

I have a table with a set of rows, using an ng-repeat:

<tr ng-repeat="model in modelList" ng-class="{hilite : model.select}">

each row with a radio button like so:

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

The radio buttons work, but I am trying to set the class of the row to highlight the background of the row with the clicked radio button.

Plunkr here:http://plnkr.co/edit/WSgC4Y4FmlzOr7Bfmlpp?p=preview

I've done this several times this way with checkboxes so I can't figure out what is wrong with the radio buttons. Being in a repeater, I though every row had its own scope, so the state of the model would affect the TR, no?

yangli-io · Accepted Answer · 2015-02-10 22:02:51Z

1

give your input a value and change the model value to point to the same model since it's a radio button and data needs to be exclusive

<input type="radio" name="modelGroup" ng-model="selected.value" value="{{$index}}">

change your ng-class to

ng-class="{hilite : selected.value == $index}"

Also make sure you create the variable in your controller and it should come under a different parent otherwise the ng-repeat will get it confused as a child of its data

$scope.selected = {value: null}

So it looks like

    <tr ng-repeat="model in modelList" ng-class="{hilite : selected.value == $index}">
          <td>
             <input type="radio" name="modelGroup" ng-model="selected.value" value="{{$index}}">
          </td>
         <td>{{ model.NDPName }}</td>
         <td>{{ model.OEM }}</td>
         <td>{{ model.version }}</td>
         <td>{{ model.dateAdded }}</td>
         <td>{{ model.validUntil }}</td>
     </tr>

I've changed ur plunk

edited Feb 10, 2015 at 22:02

answered Feb 10, 2015 at 21:42

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

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

7 Comments

Steve Over a year ago

Cool, except the highlight doesn't go away when a radio button is un-selected.

yangli-io Over a year ago

Yeah I realised, are you sure you want radio buttons and not checkboxes? the way you have structured your data suggests you want checkboxes since each object within your array have a select that can be true or false.

Steve Over a year ago

No, they want radios for some reason. They want to make it obvious the choices are mutually exclusive. As I said, checkboxes I have done many times without issue.

yangli-io Over a year ago

then you should change your data structure, the radio boxes should point to one model instead of a model for each radio box otherwise it can't be exclusive.

Steve Over a year ago

But if it's one model, what would the ng-class bind to?

|

Collectives™ on Stack Overflow

Angular JS highlight row based on radio button state

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related