Angular2 - Show/Hide 单选按钮选择部分
Angular2 - Show/Hide section on selection of radio button
我必须根据单选按钮的选择来显示或隐藏部分
<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>
如果用户点击是,那么我们必须显示 'Supply' 并隐藏 'Demand'
如果用户单击“否”,那么我们必须显示 'Demand' 并隐藏“Supply.
”
但是现在在加载表单本身时,供应和需求都会显示在屏幕上。
在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"
是否相同。
<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>
if you want to preselect the value type then type
model.prop = 'A';
in your .ts file
我必须根据单选按钮的选择来显示或隐藏部分
<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>
如果用户点击是,那么我们必须显示 'Supply' 并隐藏 'Demand' 如果用户单击“否”,那么我们必须显示 'Demand' 并隐藏“Supply.
”但是现在在加载表单本身时,供应和需求都会显示在屏幕上。
在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"
是否相同。
<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>
if you want to preselect the value type then type
model.prop = 'A';
in your .ts file