Как сделать отображаемым только при выборе определенного выпадающего списка ? Параметры заполняются директивой ng-repeat

#javascript #jquery #html #angularjs

#javascript #jquery #HTML #angularjs

Вопрос:

У меня есть select выпадающий список, заполненный директивой angularjs ng-repeat . Я бы хотел, чтобы a div отображался только при выборе определенного параметра.

Вот код:

 <select type="text"
  class="form-control"
  ng-model="vm.request.requestType"  
  name="requestType" id="requestType"
  placeholder=""
  required>
   <option selected></option>
   <option value="test">test</option>
   <option ng-repeat="requestType in vm.requestTypes">{{requestType}}</option>
</select>

<script>
    $(function() {
      $("#requestType").change(function () {
        if ($("#test").is(":selected")) {
          $("#continueCheckbox").show();
        } else {
          $("#continueCheckbox").hide();
        }
      }).trigger('change');
    });
</script>

<div id="continueCheckbox">
  <input type="checkbox"
     name="continueCheckbox"
     value="continueCheckbox">
     Check this box to continue, and to confirm that you have read the 
     Documentation
</div>

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

1. Является ли проект angular вашим? Если это так, не используйте jQuery. Смотрите Ответы (и комментарии) ниже для различных вариантов достижения того, чего вы хотите с помощью Angular: ng-if , ng-hide , ng-show , ng-class и / или ng-style — это все возможные способы сделать то, что вы хотите с помощью Angular.

2. Вы выяснили, как получить данные в ваше приложение angular из вашей базы данных?

Ответ №1:

Я настоятельно рекомендую не смешивать AngularJS и jQuery. Оба являются фреймворками для манипулирования DOM и плохо работают вместе. Вот один из способов, которым вы могли бы выполнить то, что вам нужно, с помощью AngularJS:

 <div id="continueCheckbox" ng-if="vm.request.requestType === 'test'">
    <input type="checkbox"
           name="continueCheckbox"
           value="continueCheckbox">
        Check this box to continue, and to confirm that you have read the Documentation
</div>

1. Очень похоже на это: … не смешивать AngularJS и jQuery… — в проекте Angular вам никогда не понадобится использовать jQuery. Если у вас возникнет соблазн использовать его, вы что-то упускаете в «угловом способе». Кроме того, могу ли я рекомендовать потенциально предлагать версии ng-hide и ng-show для выполнения этой работы? ng-if имеет важные различия / варианты использования, которые отличаются от hide / show . И, как будто этих параметров было недостаточно, можно было бы даже использовать ng-style , или ng-class ….

2. @cale_b Хороший вызов, ng-hide был бы лучшим эквивалентом jQuery .hide() .

3. @Lex Это работает! Один вопрос, хотя, похоже, это меняется только тогда, когда отображается флажок, есть ли способ сделать так, чтобы текст появлялся и исчезал вместе с ним? Редактировать: неважно, я понял. Попробовал использовать другой параметр, и ctrl F5 обновился, и, похоже, он работает правильно

Ответ №2:

Вы пробовали использовать ng-class директиву?

 <div id="continueCheckbox" ng-class="selected: vim.request.requestType === 'test'"></div>

Затем обработайте стиль в файле .css

 .selected {
  display: none;
}

Ответ №3:

Если вы хотите использовать jQuery, вы могли бы просто проверить значение выбора. У вас это уже настроено.

 var selectType=$(this).val();
if (selectType=="test") // instead of if ($("#test").is(":selected"))

Вы также можете использовать ванильный JS с .value для сравнения.