Adding color to label next to radio that is checked in AngularJs

Question

I have a simple angularJs example, where actually I have to show red background to label infront of radio box that is checked. However, I cannot find selected or isChecked property in the input type="radio" selected so I can add CSS based on it.

HTML

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

<p ng-repeat="x in questions">
    <input type="radio" id="{{x.id}}" name="{{x.name}}"><label for="{{x.id}}">{{x.value}}</label> 
</p>

<script> 
var app = angular.module("myApp", []);
app.controller('myCtrl',function($scope){
    $scope.questions = [
        {value:"red",name:"color",id:"1"},
        {value:"blue",name:"color",id:"2"},
        {value:"yellow",name:"color",id:"3"}
    ];
});
</script> 

</body> 
</html>

assembly_wizard · Accepted Answer · 2016-08-06 15:14:06Z

2

Use the :checked pseudo class to target only if the radio button is checked, then use + selector to select the label following the checked radio button:

input[type="radio"]:checked + label {
    background-color: red;
}

https://jsfiddle.net/y0fe1d7d/

It seems you are trying to have a different color for each radio button, so I'd recommend instead of giving each radio button a color in the CSS file when it's checked, give the color using inline styling (style="...") and then remove the background for the unchecked (:not(:checked)) radio buttons:

<label for="2" style="background-color: blue;">Blue</label>

input[type="radio"]:not(:checked) + label {
  background-color: transparent !important;
}

https://jsfiddle.net/y0fe1d7d/1/

answered Aug 6, 2016 at 15:14

assembly_wizard

2,0841 gold badge17 silver badges10 bronze badges

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

Comments

developer033 · Accepted Answer · 2016-08-06 18:49:19Z

You could add a ngModel to each element and make use of the ngStyle to change the background-color of the labels.

Take a look on this simple demo:

(function() {
  angular
    .module("myApp", [])
    .controller('myCtrl', myCtrl);

  myCtrl.$inject = ['$scope'];

  function myCtrl($scope) {
    $scope.questions = [  
       {  
          "value":"red",
          "name":"color",
          "id":"1"
       },
       {  
          "value":"blue",
          "name":"color",
          "id":"2"
       },
       {  
          "value":"yellow",
          "name":"color",
          "id":"3"
       }
    ];
    $scope.radio = {};
  }
})();

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <p ng-repeat="x in questions">
    <input type="radio" id="{{x.id}}" value="{{x.value}}" ng-model="radio.color">
    <label for="{{x.id}}" ng-bind="x.value" ng-style="{ 'background-color': x.value === radio.color ? x.value : '' }"></label>
  </p>
</body>

</html>

Collectives™ on Stack Overflow

Adding color to label next to radio that is checked in AngularJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related