我想要一个用户可以清除所选值的md-select.例如.他们选择一个值,但决定他们想要清除他们的选择.
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键时,选择第一个选项值.
解决方法
我建议除状态列表外还使用“null”选项：
<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>
所以工作片段(改编自你的)可以是：
