防止在某些條件下點擊時md-select下拉打開

Question

我有一個和我試圖阻止md-select在某些條件下打開，而是顯示一個警告對話框。

我能夠禁用MD-選擇具有以下

ng-disabled="controller.unsavedChangesMade" 

但我寧願避免這種情況，而是允許用戶與該對話框的下拉菜單單擊顯示出來，並沒有MD - 選擇開放項目列表。如果我刪除了ng-disabled，則會顯示對話框和項目的下拉列表。

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

我已經調查使用

$event.stoppropagation() 

，但我無法得到這個停止下拉列表開幕。

我不知道這是可能的，但任何幫助，將不勝感激，

感謝

Answer 1

您可以使用event.stoppropagation()與md-on-open屬性 - CodePen

<div ng-controller="AppCtrl as 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 }; }); 
     }); 
})();