セマンティックUIのドロップダウンで選択入力+ AngularJSを無効にできません

Question

別の入力の値に応じてドロップダウンを無効にしようとしています。私はSemantic 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> 

であり、これはあなたがdisabled属性が<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> 

のレンダリング方法で、 それにもかかわらず、ドロップダウンがあります無効にされません。セマンティックUIドキュメントの読み込み、そこにCSSクラス無効を使用してdisable stateでドロップダウンを設定する方法ですが、動作していないいずれかのクラス

を使用して

HTMLコード（CSSクラスが<select>に追加されます）

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

は確かに、無効になったクラスが選択入力に追加されますが、ドロップダウンが無効になっていない、クロム開発ツールを使用して、要素が無効になります、私は次の行にクラスを追加する場合

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

<select>を使用してこの作業を行う方法はありますか？

ありがとうございます。

Answer 1

これを行う簡単な方法があります。

でフィールドassクラスをラップし、そこに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>