user1694873 user1694873 - 3 months ago 68x
AngularJS Question

Prevent md-select dropdown opening under certain condition when clicked

I have an with an and I am trying to stop the md-select from opening under a certain condition and instead show a warning dialog.

I am able to disable the md-select with the following


but I would prefer to avoid this and instead allow the user to click on the dropdown with the dialog showing up, and without the md-select list of items opening up. If I remove the ng-disabled, the dialog and dropdown list of items shows up.

<label>Select Item</label>
<md-select ng-disabled="controller.unsavedChangesMade" ng-model = "selectedItem" ng-click="controller.handleItemChange(, $event)" aria-label="Selected Item">
<md-option ng-repeat = "(index,item) in controller.items" ng-value = "item"
ng-click = "controller.getItemByCategory(">

I have looked into using


but I was unable to get this to stop the dropdown list opening.

I am not sure if this is possible but any help would be greatly appreciated,



You can use event.stoppropagation() with the md-on-open attribute - CodePen

<div ng-controller="AppCtrl as ctrl" class="md-padding selectdemoBasicUsage" ng-cloak="" ng-app="MyApp">
    <div layout="row">
        <md-select ng-model="ctrl.userState" md-on-open="ctrl.test($event)">
            <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">
    <md-button ng-click="ctrl.toggle()">Toggle</md-button>


(function () {
  'use strict';
      .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) {

        this.userState = '';
        this.states = ('AL AK AZ AR').split(' ').map(function (state) { return { abbrev: state }; });