Question

我有一个和我正在尝试阻止md-select在某个条件下打开，而是显示一个警告对话框。

我可以使用以下

禁用md-select

ng-disabled="controller.unsavedChangesMade"

但我宁愿避免这种情况，而是允许用户点击显示对话框的下拉列表，而不打开md-select项目列表。如果我删除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 }; });
      });
})();

单击时在某些条件下防止md-select下拉打开

1 个答案: