angular-material – 如何清除md-select中的值

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

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

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

HTML：

<div ng-controller="AppCtrl as ctrl" class="md-padding SELEctdemoBasicUsage" ng-cloak="" ng-app="MyApp">
  <div>
    <h1 class="md-title">SELEct a state</h1>
    <span>I want the deletE key to be able to clear the SELEcted state.</span>
    <div layout="row">

      <md-input-container>
        <label>State</label>
        <md-SELEct ng-model="ctrl.userState" SELEct-clear>
          <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">
            {{state.abbrev}}
          </md-option>
        </md-SELEct>
      </md-input-container>
    </div>
  </div>
</div>

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键时,选择第一个选项值.

<md-SELEct ng-model="ctrl.userState" SELEct-clear>
      <md-option value="{{null}}">
        -- SELEct a state --
      </md-option>
      <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">
        {{state.abbrev}}
      </md-option>
    </md-SELEct>