javascript - Prevent md-select dropdown opening under certain condition when clicked -

i have , trying stop md-select opening under condition , instead show warning dialog.

i able disable md-select following

ng-disabled="controller.unsavedchangesmade" 

but prefer avoid , instead allow user click on dropdown dialog showing up, , without md-select list of items opening up. if remove ng-disabled, dialog , dropdown list of items shows up.

<md-input-container>     <label>select item</label>     <md-select ng-disabled="controller.unsavedchangesmade" ng-model = "selecteditem" ng-click="controller.handleitemchange(selecteditem.name, $event)" aria-label="selected item">         <md-option ng-repeat = "(index,item) in controller.items" ng-value = "item"                    ng-click = "controller.getitembycategory(item.name)">             {{item.name}}         </md-option>     </md-select> </md-input-container> 

i have looked using

$event.stoppropagation()  

but unable stop dropdown list opening.

i not sure if possible appreciated,

thanks

you can use event.stoppropagation() md-on-open attribute - codepen

<div ng-controller="appctrl ctrl" class="md-padding selectdemobasicusage" ng-cloak="" ng-app="myapp">   <div>     <div layout="row">       <md-input-container>         <label>state</label>         <md-select ng-model="ctrl.userstate" md-on-open="ctrl.test($event)">             <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">               {{state.abbrev}}             </md-option>           </md-select>       </md-input-container>     </div>     <md-button ng-click="ctrl.toggle()">toggle</md-button>   </div> </div> 

js

(function () {   'use strict';   angular       .module('myapp',['ngmaterial', 'ngmessages', 'material.svgassetscache'])       .controller('appctrl', function() {         this.unsavedchangesmade = false;          this.toggle = function () {           this.unsavedchangesmade = !this.unsavedchangesmade;         };          this.test = function (event) {           if (this.unsavedchangesmade) {             event.stoppropagation();                       }         };          this.userstate = '';         this.states = ('al ak az ar').split(' ').map(function (state) { return { abbrev: state }; });       }); })();