如何制作 <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>

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

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

您是否尝试过使用ng-class指令？

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

然后在.css文件中处理样式

.selected {
  display: none;
}

Answer 3

如果您想使用jQuery，则只需检查select的值即可。 您已经设置好了。

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

您也可以将香草JS与.value进行比较。