Désactiver la liste déroulante sur certaines conditions dans une autre liste déroulante

Question

J'ai une page Web simple qui ressemble à ceci;

Le code HTML est comme suit;

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

Le code du contrôleur angularjs ressemble à ceci;

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

    }]) 

J'utilise des matériaux angularjs v1. Lorsque la valeur dans la liste déroulante au centre est Mode1, je veux que la liste déroulante à droite soit désactivée (l'utilisateur ne peut pas cliquer dessus pour choisir). Sinon, la liste déroulante à droite est activée.

Answer 1

Juste essayer cela, ajoutez une directive ng handicapée

<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

L'astuce consiste à utiliser ng-disabled directive. Changez cette ligne de votre code;

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

à cette ligne;

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

Jihin Raju est presque correcte de l'exception d'une erreur de syntaxe (ng-disabled, non ng-disable).