javascript - 如何使 仅在选择某个 下拉选项时显示？ 选项由 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>

“测试”选项仅用于测试该功能是否有效。目前，无论选择什么，该复选框都会显示，并且永远不会消失。

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>