如何綁定到angular2 beta中的單選按鈕6

如何在beta 6中實現單選按鈕綁定？如何綁定到angular2 beta中的單選按鈕6

我發現了beta 0的很棒plnkr（見http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview），但是當我嘗試將它更新到beta 6時，它崩潰得非常厲害（請參閱http://plnkr.co/edit/voU933?p=preview）。

我接過一看犯所添加的內置支持無線選項（見https://github.com/angular/angular/commit/e725542），這給這個例子

@Component({ 
    template: ` 
    <input type="radio" name="food" [(ngModel)]="foodChicken"> 
    <input type="radio" name="food" [(ngModel)]="foodFish"> 
    ` 
}) 
class FoodCmp { 
    foodChicken = new RadioButtonState(true, "chicken"); 
    foodFish = new RadioButtonState(false, "fish"); 
}

，但我試圖使這項工作迄今已結束了挺像我的失敗plnkr。

來源

2016-02-26 Emdot

更新

電臺在RC.4做工精細和新形式的模塊。見例如Plunker在https://stackoverflow.com/a/38590919/217408

原始

的幾個問題。

使用<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script>引起異常。我通過刪除'min。'來消除它？

收音機綁定值{checked: true}而不是value。這顯然是一個錯誤，可能是相同的，因爲這些

我得到了它與一個醜陋的解決方法工作。見https://plnkr.co/edit/988PSJKXCfrUXfLOGgyg?p=preview

<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'" name="sex" value="male">Male<br> 
    <input type="radio" [ngModel]="{checked: model.sex == 'female'}" (ngModelChange)="model.sex='female'" name="sex" value="female">Female

來源

2016-02-26 14:10:47

哇，這些鏈接是金！我確信沒有人有例子，但顯然這只是谷歌沒有索引github問題。下次我會在那裏搜索。 – Emdot

也許你可以使用(change)事件兩次擺脫(ngModelChange)和硬編碼的輸入值：

<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (change)="model.sex=$event.target.value" name="sex" value="male">Male<br> 
<input type="radio" [ngModel]="{checked: model.sex == 'female'}" (change)="model.sex=$event.target.value" name="sex" value="female">Female

更新plnkr.co演示：https://plnkr.co/edit/NiN83eCzMD3V6oe88Obg?p=preview

來源

2016-03-03 08:13:04 martin

我已經創建了一個通過對所加載的元素僅使用單擊事件，並將選擇的值傳遞給函數「getSelection」並更新模型。

在模板：

<ul> <li *ngFor="let p of price"><input type="radio" name="price" (click)="getValue(price.value)" value="{{p}}" #price> {{p}} </li> </ul>

你的類：

export class App { 

    price:string; 

    price = ["1000", "2000", "3000"]; 

    constructor() { } 

    model = new SomeData(this.price); 

    getValue(price){ 
    this.model.price = price; 
    } 
}

見例：https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

來源

2016-06-21 03:56:31 MrLukrative

plunkr不再工作 – crh225

對於任何閱讀，形式已經改變，因此在近期]單選按鈕發佈（RC 3），現在不需要技巧:)

此PR增加了單選按鈕共享FormControl 實例的功能。這意味着您不再需要創建RadioButtonState 來管理單選按鈕。

前：

<form #f="ngForm"> 
    <input type="radio" name="food" [(ngModel)]="foodChicken"> 
    <input type="radio" name="food" [(ngModel)]="foodFish"> 
</form> 

{{ f. value | json }}  // { foodChicken: {value: 'chicken', checked: false}, foodFish: {value: 'fish', checked: true} } 
class MyComp { 
    foodChicken = new RadioButtonState(false, 'chicken'); 
    foodFish = new RadioButtonState(true, 'fish'); 
}

後：

<form #f="ngForm"> 
    <input type="radio" name="food" [(ngModel)]="food" value="chicken"> 
    <input type="radio" name="food" [(ngModel)]="food" value="fish"> 
</form> 

{{ f. value | json }}  // { food: 'fish' } 
class MyComp { 
    food = 'fish'; 
}

看到https://github.com/angular/angular/pull/9228

來源

2016-07-26 15:03:53

請[不要發佈基本上由鏈接組成的答案]（http://stackoverflow.com/questions/how-to-answer）。在你的答案中包含重要的觀點;請留下鏈接以獲取更多信息或作爲參考。 – techspider

@techspider希望這是更好:) –

-1

<div class="col-lg-4"> 
      <div class="form-group"> 
       <legend class="col-form-legend">Sexo</legend> 
       <label class="custom-control custom-radio"> 
       <input value="macho" [(ngModel)]="pet.sexo" name="pet.sexo1" id="radio1" type="radio" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
       <span class="custom-control-description">Macho</span> 
       </label> 
       <label class="custom-control custom-radio"> 
       <input value="femea" [(ngModel)]="pet.sexo" name="pet.sexo2" id="radio2" type="radio" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
       <span class="custom-control-description">Fêmea</span> 
       </label> 
      </div> 
      </div>

來源

2017-05-01 22:26:23

請添加上下文。 – coatless

如何綁定到angular2 beta中的單選按鈕6

回答

相關問題