角单选按钮:检查

Question

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

​

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

<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>

​

但是，当我试图在ngModel的角度表单中使用完全相同的片段时，css一开始并不适用于加载。相反，在应用之前，您必须单击其中一个按钮。

角柱塞

单选按钮似乎不尊重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;
  }
}

还创建了一个柱塞

普鲁克尔

Answer 2

更新插件

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想要角度的答案..。

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

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

当$scope.bool为true (或选中收音机)时，这应该会添加类"true“。

没有测试这个，但它应该有效，或者至少在某种程度上有所帮助。