在另一个下拉列表中禁用特定条件下拉列表

Question

我有一个简单的网页，看起来像这样;

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-disabled指令。更改代码的这一行;

<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 Raju几乎是正确的，除了语法错误（ng-disabled，而不是ng-disable）。