5

我需要禁用 md-select，但在 Angular 文档中找不到它。

这是我的代码：

<md-select ng-model="idSelectedMonth" placeholder="Month"> 
    <md-option ng-repeat="month in months" ng-value="month.number">
        {{month.number}}
    </md-option>
</md-select>
4

3 回答 3

11

您可以 ng-disabled="true"在 md-select 标记上使用，如下所示

(function () {
  'use strict';
   var app = angular.module("App",["ngMaterial"]);


 
    app.controller("ctrl", [function () {
        /* jshint validthis: true */
        var vm = this;

        vm.title = "Hello World !";
        
        vm.items = [
          {id:-1, text:"No Selection"},
          {id:1, text:"Item 1"},
          {id:2, text:"Item 2"},
          {id:3, text:"Item 3"},
          {id:4, text:"Item 4"},
            
          ];
        
        return vm;
    }]);
    
  
})();
<!DOCTYPE html>
<html ng-app="App">


<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.js"></script>

  <script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>


  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="ctrl as vm">
    <h1>{{vm.title}}</h1>
    <md-input-container>
      <label>Please choose</label>
      <md-select flex ng-model="vm.selected" ng-disabled="true">
        <md-option ng-value="item" ng-repeat="item in vm.items">
          <span ng-show="item.id>0"> {{item.text}}</span>
          <span ng-show="item.id<0" class="highlight"> {{item.text}}</span>
          </md-option>
      </md-select>
    </md-input-container>
  </div>
  
  
</body>

</html>

您可以检查使 ng-disable="true" 与 "false"

于 2017-04-18T12:43:27.167 回答
5

ng-disabled工作得很好。这是一个演示它的JSFiddle 。

<md-select ng-model="idSelectedMonth" placeholder="Month">
    <md-option ng-repeat="month in months" ng-value="month.number" ng-disabled="true">
        {{month.number}}
    </md-option>
</md-select>
于 2017-04-18T12:43:40.277 回答
1

您可以有条件地禁用 md-select 和 md-option

<md-input-container class="md_dropdown">
     <label>--Select--</label>
     <md-select ng-disabled="<condition>" ng-model="vm.selectedValue">
          <div ng-repeat="value in vm.values">
              <md-option 
                 ng-disabled="vm.checkDisabled(value)" 
                 ng-value="value">{{value}}</md-option>
           </div>
     </md-select>
</md-input-container>
于 2018-07-09T07:15:21.153 回答