我想要一个用户可以清除所选值的md-select.例如,他们选择一个值,但决定他们想要清除他们的选择.

md-select的行为是选择选项中的第一个条目.我想让它回到没有选择的状态.

我想我可能需要一个自定义指令,所以我实现了一个简单的指令,它监听DELETE键的keydown.

HTML:

  

    
Select a state
    I want the DELETE key to be able to clear the selected state.
    


      
        State
        
          
            {{state.abbrev}}
          
        
      
    
  

JS:

(function () {
  'use strict';
  angular
      .module('MyApp',['ngMaterial', 'ngMessages'])
      .controller('AppCtrl', function() {
        this.userState = '';
        this.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
            'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
            'WY').split(' ').map(function (state) { return { abbrev: state }; });
      })
  .directive('selectClear', function() {
    return {
        restrict: 'A',
        require: 'ngModel',

        link : function(scope, iElement, iAttrs, ngModelCtrl) {
            iElement.bind('keydown', function(event) {
                if (event.keyCode === 46) {
                    ngModelCtrl.$setViewValue('', event);
                }
            })
        }        
    }    
  });
})();

这是我的代码笔:

http://codepen.io/craigsh/pen/GorpVV

但它不起作用 - 当按下DELETE键时,选择第一个选项值.

我建议除状态列表外还使用"null"选项:

    
      
        -- select a state --
      
      
        {{state.abbrev}}
      
    

所以工作片段(改编自你的)可以是:

http://codepen.io/beaver71/pen/LGxqjp

在Angular-material文档中,他们将md-select的值设置为undefined

 $scope.clearValue = function() {
   $scope.myModel = undefined;
 };

您也可以在他们的网站上查看它 https://material.angularjs.org/latest/demo/select 请参阅验证部分