在 AngularJs 中选中的收音机旁边的标签上添加颜色答案

【问题标题】：Adding color to label next to radio that is checked in AngularJs在 AngularJs 中选中的收音机旁边的标签上添加颜色
【发布时间】：2016-12-12 20:00:25
【问题描述】：

我有一个简单的 angularJs 示例，实际上我必须显示红色背景以标记选中的单选框前面。但是，我在选择的输入 type="radio" 中找不到 selected 或 isChecked 属性，因此我可以基于它添加 CSS。

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>

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

仅在选中单选按钮时使用:checked 伪类来定位，然后使用+ 选择器选择选中的单选按钮后面的标签：

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

https://jsfiddle.net/y0fe1d7d/

您似乎正在尝试为每个单选按钮设置不同的颜色，所以我建议不要在 CSS 文件中为每个单选按钮在选中时为其赋予颜色，而是使用内联样式 (style="...") 赋予颜色，然后删除未选中 (:not(:checked)) 单选按钮的背景：

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

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

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

【讨论】：

【解决方案2】：

您可以为每个元素添加ngModel，并利用ngStyle 更改labels 的background-color。

看看这个简单 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>

【讨论】：