角度-根据下拉列表值显示或隐藏 [英] Angular - Show or Hide based on Dropdown list value

问题描述

我希望我的下拉列表根据所选值显示/隐藏Div

I want my Dropdown list to show/hide Div based on the value selected

我的角度项目中有一个下拉列表和几个Div，如代码所示

I have a dropdown list and several Div in my angular project as shown in the code

<div class="col-md-12 no-padding">
                    <label>Reply Type</label>

                    <select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;">
                     <option value="predefined">Predefined</option>
                     <option value="opentype">Open Type</option>
                    </select>           
              </div>

Div1

                      <div class="col-md-12 no-padding">
                        <label>Application Name</label>
                        <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
                        <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
                            Application Name is required! </span>
                      </div> 

Div2

                <div class="col-md-12 no-padding">
                  <label>Main Menu</label>
                  <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
                </div>  

如果预定义的值是预定义的，则Div1是可见的，Div2是隐藏的；但是，如果它是opentype，则Div2是可见的，Div1是隐藏的.

If the selected value is predefined then Div1 is visible and Div2 is hidden, but if it is opentype then Div2 is visible and Div1 is hidden.

默认情况下，Div1的值应为opentype，而Div2的应为可见

By default, the Div1 value should be opentype and Div2 should be visible

推荐答案

在这里，我在下拉菜单中使用了 ngModel ，以便您可以从下拉菜单中获得所选择的值.

Here I've used ngModel in the dropdown so, that you can get the value which you've selected from the dropdown.

<div class="col-md-12 no-padding">
                    <label>Reply Type</label>

                    <select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;" [(ngModel)]="optionValue">
                     <option value="predefined">Predefined</option>
                     <option value="opentype" selected>Open Type</option>
                    </select>           
</div>

在Ts文件中，您需要像这样声明一个名为optionValue的变量:

and in Ts file, you need to declare one variable called optionValue like this:

`optionValue`;

，现在您可以将 ngIf 用于显示/隐藏Divs.

and now you can use ngIf for show/hide Divs.

Div1

<ng-container *ngIf="optionValue == 'predefined'>
 <div class="col-md-12 no-padding">
                    <label>Application Name</label>
                    <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
                    <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
                        Application Name is required! </span>
                  </div> 
</ng-container>

Div2

<ng-container *ngIf="optionValue == 'opentype'"
<div class="col-md-12 no-padding">
              <label>Main Menu</label>
              <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
            </div> 
</ng-container>

这篇关于角度-根据下拉列表值显示或隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！