Question

用于审核的Plnkr代码：https://plnkr.co/edit/vWR7kK9MQw4nyciRt1Bj?p=preview

如果选择下拉值为“其他”，如何显示div或输入框？

HTML

<div class="form-group fields col-sm-2 col-xs-4">
    <label>EDUCATION QUALIFICATION *</label>
    <select name="education" class="form-control1 drop" required ng-model="model.education" placeholder="select">
        <option value='' disabled selected>Select</option>
        <option value="male">10th</option>
        <option value="female">12th</option>
        <option value="male">Graduate</option>
        <option value="male">Post Graduate</option>
        <option value="male">Ph.d</option>
        <option value="other">Others</option>
    </select>
</div>

<div class="form-group fields col-sm-2 col-xs-4 floatField" ng-if =" model.education=Others;displayDiv = true">  
    <label>OTHERS</label>
    <input type="text" name="othereducation" class="form-control1" autocomplete="off" ng-model="model.othereducation"/>
</div>

Answer 1

您可以使用Angular内置指令ng-show / ng-hide来显示或隐藏内容。

因此，当您选择值＆＃39;其他＆＃39;时，您可以添加以下代码段以显示所需内容。在选择框中。

<div ng-show="model.education==='other'">
    DIV/input you want to show
</div>

<强>演示： JSBin

Answer 2

这是工作link

尝试以下代码

<强>代码

<div  ng-if="model.education==='other'">
         <label >OTHERS</label>
             <input type="text" name="othereducation" class="form-control1" autocomplete="off" ng-model="model.othereducation"/>

          </div>

当下拉值选为其他时，显示div或输入框

2 个答案: