Angular material 如何清除md select中的值

我想有一个md选择，用户可以清除所选的值。例如，他们选择了一个值，但决定清除所选内容

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

我想我可能需要一个定制的指令来实现这个，所以我实现了一个简单的指令，它监听DELETE键的keydown

HTML:

这是我的密码笔：

---

但它不起作用-当按下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>

因此，改编自您的工作片段可能是：

---

在“角度材质”文档中，它们将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, '');
                  });
                }
            })
        }        
    }    
  }

---

我做了一个简单的指示来帮我处理这件事

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>

---

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

---

我迟到了，这可能是angular material库中的一个演变，但有可能将md选项empty添加到md选项中，以将其标记为empty的等效项

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

这将在列表中显示一个无选择选项，一旦选择，将使输入为空并将未定义传递给ng模型

---

Cf

我也迟到了，但在html中添加了一个模板选择变量：

<button (click)="selectAll(selectField)">Deselect All</button>

 <mat-select #selectField>
   <mat-option
     *ngFor="let option of options | async"
     [value]="option.id">
     {{option.text}}
   </mat-option>
 </mat-select>

---

取消选中所有复选框并重置材料选择。

谢谢-效果很好-尽管我希望避免添加额外的项目。不幸的是，我担心使用md select没有其他可能性：事实上，您无法将选择重置为空值或未定义的值，除非它出现在选项中。au contaire！将模型设置为null或undefined效果很好，即占位符值再次显示，因此无需添加额外的md选项。然而，我注意到的一个问题是，这似乎并没有将字段标记为脏的…？为了使其正常工作，我需要使用ng value={{null}}谢谢，但最初的问题是针对AngularJS的-AngularJS的后一个版本当时不存在：我很晚了

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

<button (click)="selectAll(selectField)">Deselect All</button>

 <mat-select #selectField>
   <mat-option
     *ngFor="let option of options | async"
     [value]="option.id">
     {{option.text}}
   </mat-option>
 </mat-select>

public deselectAll() {
  selectField.value = [];
}