角單選按鈕：檢查

在咋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的最初不適用的負載。相反，您必須在適用之前單擊其中一個按鈕。

angular plunkr

看來，單選按鈕不尊重checked屬性？我如何讓角度單選按鈕開始檢查並應用css？

來源

2017-05-29 Zze

請改變你的組件，如下

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

來源

2017-05-29 10:45:05 sainu

謝謝 - 完美。 – Zze

所以我只是有一個非常奇怪的bug'ngModel'不再改變。我通過使'id'和'for'屬性綁定來解決這個問題。即'[for] =「example.value」' – Zze

-1

這個答案是AngularJS。 OP想要的答案對角...

隨着角度也可以根據NG-模型

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

該值增加一個類應該添加類「真」時$範圍。布爾是真實的（或無線檢查）

沒有測試這一點，但它應該工作或以某種方式至少幫助。

來源

2017-05-29 10:06:40

對不起，我正在尋找angular而不是angularJS。 – Zze

哎呀，我的壞... –

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

來源

2017-05-29 10:20:05

這是不是與形式的正常工作。即使設置了初始值，它也不會反映在表單值中：http://plnkr.co/edit/cXfkRAsYNoWPWjNw5Zqp?open=app%2Fapp.component.ts&p=preview另外，它並不反映返回到'template1'的值無線電被點擊... – Alex

@ AJT_82燁我試圖去弄清楚它沒有反映在我們天璣有ngModel ATTR。我們需要綁定的檢查ngModel，但它不是發生 –

角單選按鈕：檢查

回答

相關問題