无法使用 select 输入 + 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 文档，有一种方法可以使用 css class disabled 在 disable state 中设置下拉菜单，但是也不工作（css class 添加到 <select>）

HTML 使用 class

的代码

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

确实，class 禁用已添加到 select 输入，但下拉列表未禁用，使用 Chrome 开发工具，如果我添加 class 在下一行

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

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

提前致谢。

Answer 1

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

用字段 css class 包装 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>

无法使用 select 输入 + AngularJS 禁用语义 UI 下拉菜单

Semantic UI dropdown not able to disable using select input + AngularJS

html

css

angularjs

semantic-ui