クリック時に入力タイプのラジオから値を取得

Question

ラジオタイプのツリー入力があるボタングループがあります。 私がこれらを使用する理由は、自分のプロジェクトで購入したスタイルテンプレートを取得するためには、まったく同じ要素を使用する必要があります。

ボタン群は、動的テーブル上のサイズを制御して、私は、イベントボタン（入力）

<div class="btn-group" data-toggle="buttons" (click)="pageSizechanged($event)" > 
    <label class="btn btn-success"> 
      <input type="radio" name="options"> 10 
    </label> 
    <label class="btn btn-success"> 
      <input type="radio" name="options"> 20 
    </label> 
    <label class="btn btn-success active"> 
      <input type="radio" > 30 
    </label> 
</div> 

が押されたときに、私は私は入力に結合しようとした角度2を使用してい焼成必要私は一度だけ、各入力を押すことができるよう下回っ解決として運のない値（図示せず）...

更新

で答えがマークされ、部分的にしか私の問題を解決しました。これを解決するために、私は次のようにしました：

<div class="btn-group"> 
    <label class="btn btn-success"> 
     <input type="radio" style="display:none" value="10" (change)="pageSizechanged($event.target)" > 10 
    </label> 
    <label class="btn btn-success"> 
     <input type="radio" style="display:none" value="20" (change)="pageSizechanged($event.target)"> 20 
    </label> 
    <label class="btn btn-success"> 
     <input type="radio" value="30" style="display:none" (change)="pageSizechanged($event.target)"> 30 
    </label> 
</div> 

変更イベントでは、私はターゲットを一緒に渡します。チェックをfalseに設定したいからです：

pageSizechanged(target) { 
    this._pagesize = target.value; 
    target.checked = false; 
    ... 
} 

それ以外の場合、入力はチェックされたままになり、変更イベントは発生しません。誰かがこれを行うより良い方法を持っている場合、共有してください:)

Answer 1

私が正しく理解していれば、達成したいことは完全には分かっていません。

ラジオボタンをngModelでバインドし、現在のクリックイベントを完全に回避して、変更に反応することができます。次のテンプレートが機能し、コンポーネントクラスに変数tableSizeを定義するだけです。

<div class="btn-group"> 
    <label class="btn btn-success"> 
     <input type="radio" name="options" [(ngModel)]="tableSize" value="10"> 10 
    </label> 
    <label class="btn btn-success"> 
     <input type="radio" name="options" [(ngModel)]="tableSize" value="20"> 20 
    </label> 
    <label class="btn btn-success active" > 
     <input type="radio" [(ngModel)]="tableSize" value="30"> 30 
    </label> 
</div> 

Current tableSize: {{tableSize}} 

イベントを必要とする場合は、あなたにも入力タグに(change)="myFunc($event.target.value)"を追加することができます。

Answer 2

私は、現在、ラジオ入力がangular2でうまくサポートされているとは思いません。 (you seem to have to make your own component)。

私はそうのように、（クリック）イベントに単純なイベントハンドラでそれらを使用している：私たちはselectedChoice='Yes'で初期化するのであれば

<label class="chart__controls__item" *ngFor="let choice of ['competitor','taxonomy']"> 
    <input type="radio" 
     name="options" 
     (click)="selectedChoice = choice" 
     [checked]="choice === selectedChoice" > 
     No 
</label> 
<label> 
    <input type="radio" 
     name="options" 
     [checked]="choice === selectedChoice" 
     (click)="selectedChoice = choice > 
     Yes 
</label> 

、2番目のラジオボタンが選択されます。 [checked]属性は、選択されたラジオボタンがチェックされ、(click)ディレクティブがモデル変更をトリガーすることを確認します。