Question

在ye plain plain html和css中，我可以执行以下操作：

＆＃13;

input:checked+label {
  background-color: #f00;
}

＆＃13;

<div class="col-xs-6">
  <input type="radio" id="template-1" name="template" value="template1" checked>
  <label for="template-1">Example 1</label>
</div>
<div class="col-xs-6">
  <input type="radio" id="template-2" name="template" value="template2">
  <label for="template-2">Example 2</label>
</div>

＆＃13;

但是，当我尝试在ngModel的角度形式中使用完全相同的片段时，css最初不会应用于加载。相反，您必须在应用之前单击其中一个按钮。

angular plunkr

单选按钮似乎不符合checked属性？如何让我的角度单选按钮开始检查并应用css？

Answer 1

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

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

plunkr

Answer 2

更新了Pluker

http://plnkr.co/edit/xCZKeAx8Q2e2Ge5istuE?open=app%2Fapp.component.ts&p=preview

  <div class="col-xs-6">
        <input type="radio" id="template-1" name="template" value="template1" checked = "{1 == 1}">
        <label for="template-1">Example 1</label>
    </div>

Answer 3

这个答案适用于AngularJS。 OP想要有角度的答案......

使用angular，您还可以根据ng-model

的值添加一个类

<input type="radio" ng-model="bool" ng-class="bool ? 'true' : 'false'">

当$ scope.bool为true（或检查无线电）时，应该添加类“true”

没有对此进行测试，但它应该起作用或至少在某种程度上有所帮助。

角度单选按钮：选中

3 个答案: