我发现一个伟大的测试版0(参见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.
无线电在RC.4和新表单模块中工作正常.
参见例如http://stackoverflow.com/a/38590919/217408的Plunker
原版的
几个问题.
使用< script src =“https://code.angularjs.org/2.0.0-beta.7/angular2.min.js”>< / script>造成例外.我通过删除`min.
收音机绑定值{checked:true}而不是值.这显然是一个错误,可能与这些相同
> Radio button data binding and form validation not working
> Cannot select multiple radio buttons in same control group(固定)
> input type=radio not handled correctly by ng-model(固定)
> https://github.com/angular/angular/issues/7642
我遇到了一个丑陋的解决方法.见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