Angular2 - 选择单选按钮时显示/隐藏部分

时间:2017-07-24 17:51:42

标签: angular radio-button primeng

我必须根据选择的单选按钮显示或隐藏部分

 <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>

如果用户点击是,那么我们必须显示'供应'并隐藏'需求' 如果用户点击否,那么我们必须显示'需求'并隐藏'供应。

但是现在在加载表单时,屏幕上都会显示供应和需求。

2 个答案:

答案 0 :(得分:13)

在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</label>

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

无需检查option==truefalse[checked]="options"[checked]="!options"是否也这样做。

答案 1 :(得分:2)

<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文件中的