14

ベータ 6 でラジオ ボタンのバインドを実現するにはどうすればよいですか?

ベータ 0 用の優れた plnkr を見つけました ( http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=previewを参照) が、ベータ 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とまったく同じように終わっています.

4

5 に答える 5

18

アップデート

ラジオは RC.4 と新しいフォーム モジュールで正常に動作しています。たとえば、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-26T14:10:47.020 に答える
2

おそらく、イベント(ngModelChange)を使用して、入力値を 2 回ハードコーディングして取り除くことができます。(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 に答える