14

如何在 beta 6 中实现单选按钮绑定？

我为 beta 0 找到了一个很棒的 plnkr（请参阅http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview），但是当我尝试将其更新到 beta 6 时，它会严重中断（请参阅http://plnkr.co/编辑/voU933?p=预览）。

我查看了添加对单​​选选项的内置支持的提交（参见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 非常相似。

4

5 回答 5

18

更新

Radio 在 RC.4 和新的表单模块中运行良好。例如，参见https://stackoverflow.com/a/38590919/217408中的 Plunker

原来的

几个问题。

使用<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-26T14:10:47.020 回答
8

对于阅读本文的任何人，表单都发生了变化，最近发布的单选按钮（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-26T15:03:53.917 回答
2

也许您可以使用事件(ngModelChange)两次摆脱硬编码输入值：(change)

<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-03T08:13:04.620 回答
0

我创建了一个版本，方法是仅在加载的元素上使用一个单击事件，并将选择的值传递给函数“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-21T03:56:31.690 回答
-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-01T22:26:23.820 回答