Отображать div или поле ввода, когда выпадающее значение выбрано как другие

#html #angularjs #html-select #angular-ngmodel

#HTML #angularjs #html-выбрать #angular-ngmodel

Вопрос:

Код 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>

1. Почему вы вручную пишете теги опций вместо использования ng-options?

2. Просто для практических целей.

3. Вы хотите отобразить текстовое поле или div на основе значения поля выбора?

4. вы можете использовать модель (model.education) для отображения / скрытия поля ввода. не так ли?

5. @ram1993 Я попробовал, что дает ng-show =»model.education==others», но он все равно не отображается.

Ответ №1:

Вы можете использовать встроенные угловые директивы ng-show / ng-hide для отображения или скрытия содержимого.

Таким образом, вы можете добавить приведенный ниже фрагмент для отображения требуемого содержимого при выборе значения «другое» в поле выбора.

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

Демонстрация:
JSBin

1. Можете ли вы быстро воспроизвести проблему в jsbin?

2. Для меня это работает. смотрите Обновленный ответ с демонстрацией

3. Проверьте, не появляется ли ошибка в консоли вашего браузера

4. plnkr.co/edit/vWR7kK9MQw4nyciRt1Bj?p=preview Никаких ошибок. Но вы можете увидеть код здесь

5. @NicoletaWilskon В вашем plnkr необходимо внести много изменений. Вы не включили AnagularJS, указанное ng-app и как вы думаете, вы используете приложение angular?

Ответ №2:

Вот рабочая ссылка

Попробуйте следующий код

Код

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

          </div>