md-selectの値をクリアする方法

Question

md-selectを使用して、選択した値をクリアできるようにしたいと考えています。例えば。彼らは値を選択するが、彼らは選択をクリアしたいと決める。

md-selectの動作は、オプションの最初のエントリを選択することです。私はそれが選択されていない状態に戻るようにしたいと思います。

私はおそらくこのためにカスタムディレクティブが必要だと思います。そのため、DELETEキーのキーダウンを聞く簡単なディレクティブを実装しました。

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

しかし、それは動作しません - DELET Eキーを押すと、最初のオプション値が選択されます。

Answer 1

私は状態のリストに加えて「ヌル」オプションを使用することをお勧め：

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

ので、（あなたから適応）作業スニペットは次のようになります。では

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

Answer 2

角度材料ドキュメントはあなたのmd-selectの値を未定義に設定します

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

.directive('selectClear', function($parse) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 

     link : function(scope, iElement, iAttrs) { 
      iElement.bind('keydown', function(event) { 
       if (event.keyCode === 46) { 
        event.preventDefault(); 
        event.stopPropagation(); 

        scope.$evalAsync(function() { 
        var modelGetter = $parse(iAttrs['ngModel']), 
         modelSetter = modelGetter.assign; 
        modelSetter(scope, ''); 
        }); 
       } 
      }) 
     }   
    }  
    } 

Answer 3

を参照してください私はかなりうまく動作指令を実施し自分のサイトでもそれを確認することができます私。

angular.module 'app.components' 
.directive 'deleteWhenBlank', -> 
    directive = 
    restrict: 'A' 
    require: ['ngModel'] 
    scope: 
    model: '=ngModel' 
    link: ($scope, el, attrs) -> 
    $scope.$watch('model', (value) -> 
     unless value 
     delete $scope.model 
    ) 

私はこのように使用しています。 md-selectがフォーカスを失うと、モデルはnullに設定されます。

<md-select ng-model='some.model' delete-when-blank> 
    <md-option value=''></md-option> 
    <md-option value='{{undefined}}'></md-option> 
    <md-option value='{{null}}'></md-option> 
</md-select> 

Answer 4

私はこれの世話をするための簡単な指示をした：あなたはhttps://material.angularjs.org/latest/demo/selectが最後に検証セクション

Answer 5

角度素材選択のデモでは、必要な機能を複製「状態」ドロップダウンがあります。 https://material.angularjs.org/latest/demo/select

彼らが使用するコードは次のとおりです。

<md-input-container> 
    <label>State</label> 
    <md-select ng-model="ctrl.userState"> 
     <md-option><em>None</em></md-option> 
     <md-option ng-repeat="state in ctrl.states" ng-value="state.abbrev" ng-disabled="$index === 1"> 
      {{state.abbrev}} 
     </md-option> 
    </md-select> 
</md-input-container> 

Answer 6

私は遅く、これです角度材料のlibに進化しているかもしれませんが、md-option-emptyをmd-optionに追加して、それを空のものとしてマークする可能性があります。

<md-option md-option-empty ng-value="undefined">No selection</md-option> 

これは、リスト内の「選択なし」オプションを表示し、一度選択、入力が空になります（とng-modelにundefinedを渡す）されます。

Cfのdoc