Как заставить <div>показывать только когда выбран определенный вариант <select>? Опции <select>заполняются директивой ng-repeat

Question

У меня есть раскрывающийся список select, заполненный директивой angularjs ng-repeat. Я бы хотел, чтобы 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>

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

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

Answer 2

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

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

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

Answer 3

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

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

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

.selected {
  display: none;
}