web-dev-qa-db-ja.com

Angular2-ラジオボタンの選択に関するセクションの表示/非表示

ラジオボタンの選択に基づいてセクションを表示または非表示にする必要があります

 <input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options==true"/> Yes

    <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="options==false"/> No</label>

<div>
      <h2 ng-show="options == 'true'">Supply</h2>
      <h2 ng-show="options == 'false'">Demand</h2>
</div>

ユーザーが「はい」をクリックした場合、「供給」を表示して「需要」を非表示にする必要がありますユーザーが「いいえ」をクリックした場合、「需要」を表示して「供給」を非表示にします。

ただし、フォーム自体の読み込み中は、需要と供給の両方が画面に表示されます。

angularradio-buttonprimeng
10
Jan69

In Angularでは* ngIfで実現できます：

 <input name="options"  [(ngModel)]="options" type="radio" [value]="true" [checked]="options"/> Yes

 <input name="options"[(ngModel)]="options" type="radio" [value]="false" [checked]="!options"/> No

 <h2 *ngIf="options">Supply</h2>
 <h2 *ngIf="!options">Demand</h2>

そして、option==trueまたはfalse、[checked]="options"および[checked]="!options" 同じことをする。

19
Vega
<div>
            <div class="radio">
                <label><input type="radio" [(ngModel)]="model.prop" name="prop" value="A">A</label>
            </div>
            <div class="radio">
                <label><input type="radio" [(ngModel)]="model.prop" name="prop" value="B">B</label>
            </div>
            <div class="radio">
                <label><input type="radio" [(ngModel)]="model.prop" name="prop" value="C">C</label>
            </div>
    </div>

<div *ngIf="model.prop === 'A'">A</div>
<div *ngIf="model.prop === 'B'">B</div>
<div *ngIf="model.prop === 'C'">C</div>

値タイプを事前選択する場合は、次を入力します

 model.prop = 'A';

.tsファイル内

2
Girish