Menu
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>
916
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"
127
ng-disabled is working just fine. Here's a JSFiddle demonstrating it.
<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>
You can disable md-select and md-option conditionally
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
