Search code examples
angularjsmd-selectangularjs-ng-disabled

How to disable md-select


I need to disable a md-select but I couln't find it in the Angular documentation.

This is my code:

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

Solution

  • you can use ng-disabled="true" on md-select tag like below

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

    You may check with making the ng-disable="true" with "false"