如何绑定角色2 beta 6中的单选按钮

前端之家收集整理的这篇文章主要介绍了如何绑定角色2 beta 6中的单选按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在beta 6中实现单选按钮绑定?

我发现一个伟大的测试版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

猜你在找的Angularjs相关文章