1

I'm quite new to angular so perhaps the answer is right in front of my face, especially since I've seen very similar questions but none have worked for me. As the title suggests, I am trying to change ng-class based on which of 3 radio buttons is selected within an ng-repeat. Some things I've tried in example is ng-click though this seems to behave with a boolean true / false behavior, where I think I need more of a switch-like behavior. I've also tried the solution here though this doesn't seem to work in a conditional case. Here is what I am working with:

<div class="col-md-4 col-sm-4 col-xs-12 projectType" ng-repeat="type in types">
   <label>
      <span class="typeIcon" ng-class="type.icon"></span>
      <p>{{ type.name }}</p>
      <input type="radio" name="type" ng-value="type" ng-model="$parent.selectedType" />
   </label>
</div>
<div class="col-md-12 col-sm-12 col-xs-12" ng-hide="selectedType.id !== 1">
    <input type="text" ng-hide="selectedType.id !== 1" ng-disabled="selectedType.id !== 1">
</div>
<div class="col-md-12 col-sm-12 col-xs-12" ng-hide="selectedType.id !== 2">
    <input type="text" ng-hide="selectedType.id !== 2" ng-disabled="selectedType.id !== 2">
</div>
<div class="col-md-12 col-sm-12 col-xs-12" ng-hide="selectedType.id !== 3">
    <input type="text" ng-hide="selectedType.id !== 3" ng-disabled="selectedType.id !== 3">
</div>

The controller simply applies features to each type, such as an id and name.

What I am specifically trying to do is change the background-color of the parent label when the radio is selected. I additionally added some divs below that also toggle based on which radio is selected to show some existing logic that may be a barrier or asset for any possible solutions. I know this may be a very simple task in angular, so I appreciate your patience and help.

Community
  • 1
  • 1
Nathan Lykke
  • 71
  • 1
  • 11

2 Answers2

2

You can modify the HTML in this way:

<div class="col-md-4 col-sm-4 col-xs-12 projectType" ng-repeat="type in types">
   <label ng-class="{ 'red': $parent.selectedType.value === type.value }">
      <span class="typeIcon" ng-class="type.icon"></span>
      <p>{{ type.name }}</p>
      <input type="radio" name="type" ng-value="type" ng-model="$parent.selectedType" />
   </label>
</div>

And the JS part is (for testing):

$scope.$parent.selectedType = {};
$scope.types = [ { name: 'a', value: 'A' }, { name: 'b', value: 'B' }, { name: 'c', value: 'C' } ];
Mat
  • 2,156
  • 2
  • 16
  • 29
  • 'red' is a test class with red background – Mat Dec 27 '15 at 16:43
  • I'm going to try this out, can you explain what is happening here `$parent.selectedType.value === type.value` – Nathan Lykke Dec 27 '15 at 16:51
  • I used a 'value' property inside 'types', but you can use 'id', 'name' or any field you like. And I used '$parent.selectedType' because you used that as model for the input radio (it would be better to avoid a name starting with $, which usually refer to a core/system property) – Mat Dec 27 '15 at 16:54
  • Never mind, stupid question once I really looked at it in context. Worked like a charm, thanks! – Nathan Lykke Dec 27 '15 at 16:54
  • Yeah, I was confused because I thought before today that you could only reference the `ng-model` after it is declared, but it makes perfect sense. Thank you! – Nathan Lykke Dec 27 '15 at 16:55
2

Here is how to do what you need:

When a radio is selected, its background color is changed to red, for that I created this class:

.selectedlabel { background-color: red; }

And then applied it to the label of the radio input using ng-class like below

<label ng-repeat="type in types" ng-class="{selectedlabel: $parent.selected == type.id}">
<input type="radio" ng-model="$parent.selected" name="Group" ng-value="type.id"> {{type.name }}
<br>

For showing/hiding divs with the selected radios, I used ng-show

 <div ng-show="selected == 1">

The complete fiddle is here: Fiddle

Hisham
  • 2,586
  • 1
  • 14
  • 18