html - 无法使用选择输入 + AngularJS 禁用语义 UI 下拉列表

Question

我正在尝试根据不同输入的值禁用下拉菜单。我正在使用语义 UI 和 Angular。

这是我的HTML

<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
        ng-options="option.value as option.text for option in question.options"
        ng-model="question.answer"
        ng-disabled="!question.isEnable">
</select>

这是渲染的方式

    <div class="ui search dropdown ng-pristine ng-untouched ng-valid selection">
    <select ng-attr-id="{{'dd-' + question.id}}" ng-options="option.value as option.text for option in question.options" ng-model="question.answer" ng-disabled="!question.c_questionIsEnable" id="dd-483" disabled="disabled">
    <option value="" class="" selected="selected"></option>
    <option label="Yes" value="string:213">Yes</option>
    <option label="No" value="string:214">No</option>
    <option label="Does not apply" value="string:547">Does not apply</option>
    </select>
    <i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
<div class="text"></div><div class="menu transition hidden" tabindex="-1">
<div class="item selected" data-value="string:213">Yes</div>
<div class="item" data-value="string:214">No</div>
<div class="item" data-value="string:547">Does not apply</div>
</div>
</div>

正如您在呈现的代码中看到的，禁用属性存在于 <select> 中。 , 尽管如此，下拉菜单并未被禁用。阅读语义 UI 文档，有一种方法可以在 disable state 中设置下拉菜单。使用 css 类 disabled 但也不起作用(css 类添加到 <select> )

使用类的HTML代码

<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
            ng-options="option.value as option.text for option in question.options"
            ng-model="question.answer"
            ng-class="{'disabled': !question.isEnable}">
    </select>

确实，禁用类已添加到选择输入但下拉列表未禁用，使用 Chrome 开发工具，如果我在以下行中添加类，该元素将被禁用

<div class="ui search dropdown ng-pristine ng-untouched ng-valid selection disabled">

有没有办法使用 <select> 来完成这项工作？ ？

提前致谢。

Answer 1

有一种简单的方法可以做到这一点。

用字段 css 类包装 a，并在其中使用 ng-class 属性。

希望这对您有所帮助。

<div class="ui field" ng-class="{'disabled': !question.isEnable }"> 
<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
        ng-options="option.value as option.text for option in question.options"
        ng-model="question.answer">
</select>
</div>