如何绑定到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

回答

相关问题