別のドロップダウンリストで特定の条件のドロップダウンリストを無効にする

Question

私はこのような単純なWebページを持っています。

HTMLコードは、次の通りです。

<div ng-controller="room_controller" class="md-padding" ng-cloak layout="column"> 
    <md-card> 
     <md-card-title> 
      <md-card-title-text> 
       <span class="md-headline">Room settings</span> 
      </md-card-title-text> 
     </md-card-title> 
     <md-card-content> 
      <div layout="row" layout-align="space-between center"> 
       <span>Room</span> 
       <md-select ng-model="mode" placeholder="Mode1" class="md-no-underline"> 
        <md-option value="auto">Mode1</md-option> 
        <md-option value="manual">Mode2</md-option> 
       </md-select> 
       <md-select ng-model="channel_number" placeholder="1" class="md-no-underline"> 
        <md-option value="1">1</md-option> 
        <md-option value="2">2</md-option> 
        <md-option value="3">3</md-option> 
       </md-select> 
      </div> 
     </md-card-content> 
    <md-card> 
</div> 

angularjsコントローラコードは次のようになります。

.controller('room_controller', ['$scope', 
    function ($scope) { 

    }]) 

私はangularjs v1の素材を使用しています。中央のドロップダウンリスト内の値がMode1である場合、右のドロップダウンリストを無効にしたい（ユーザーはそれをクリックして選択することはできません）。それ以外の場合は、右側のドロップダウンリストが有効になります。

Answer 1

だけトリックがng-disabledディレクティブを使用することです

<md-select ng-disabled="mode == 'auto'" ng-model="channel_number" placeholder="1" class="md-no-underline"> 
    <md-option value="1">1</md-option> 
    <md-option value="2">2</md-option> 
    <md-option value="3">3</md-option> 
</md-select> 

Answer 2

NG-無効ディレクティブを追加し、これを試してみてください。コードのこの行を変更します。

<md-select ng-model="channel_number" placeholder="1" class="md-no-underline"> 

この行には、

<md-select ng-disabled="mode == 'auto'" ng-model="channel_number" placeholder="1" class="md-no-underline"> 

Jihinラジュさんは、構文エラー（ng-disabled、ないng-disable）を除いて、ほぼ正しいです。