Css 角度单选按钮：选中

在普通html和css中，我可以执行以下操作：

输入：选中+标签{ 背景色：f00； } 例1 例2

---

这个答案适用于AngularJS。OP希望得到关于角的答案

使用angular，还可以根据ng模型的值添加一个类

当$scope.bool为true或已检查无线电时，应添加类true

没有测试这个，但它应该可以工作，或者至少在某些方面有所帮助

更新的Pluker

---

请按以下方式更改您的组件

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>Hello {{name}}</h1>
        <div *ngFor="let example of examples" class="col-xs-6">
          <input type="radio" id="example.value" name="example" [(ngModel)]="template" [value]="example.value">
      <label for="example.value">{{example.display}}</label>
    </div>
  `,
  styles: [`input:checked + label{background-color: #f00;}`]
})
export class AppComponent implements OnInit{ 
  name = 'Angular';
  public examples = [
    { value: 1, display: 'Example 1' },
    { value: 2, display: 'Example 2' }
];
 template:string;


ngOnInit(){
   this.template = this.examples[0].value;
  }
}

还创建了一个plunkr

---

抱歉，我正在寻找angularJS而不是angularJS。这与表单不兼容。即使设置了初始值，它也不会反映在表单值中：当单击该收音机时，它也不会将值反射回template1…@AJT_82是的，我试图找出它不会反射，因为我们没有ngModel attr。我们需要将checked绑定到ngModel，但这并没有发生，所以我有一个非常奇怪的bug，ngModel不再改变。我通过将id和for属性绑定来解决这个问题。i、 e.[for]=示例.value

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>Hello {{name}}</h1>
        <div *ngFor="let example of examples" class="col-xs-6">
          <input type="radio" id="example.value" name="example" [(ngModel)]="template" [value]="example.value">
      <label for="example.value">{{example.display}}</label>
    </div>
  `,
  styles: [`input:checked + label{background-color: #f00;}`]
})
export class AppComponent implements OnInit{ 
  name = 'Angular';
  public examples = [
    { value: 1, display: 'Example 1' },
    { value: 2, display: 'Example 2' }
];
 template:string;


ngOnInit(){
   this.template = this.examples[0].value;
  }
}