Angular Material - 选择，null选项

Question

我正在尝试向未选中的选项添加选项，我希望将表单项重置为默认值而不是“ - NONE - ”。

<md-select ng-model="topping">
  <md-option ng-value=""> -- NONE -- </md-option>
  ...
</md-select>

更新

我能够通过观察和删除该值来解决，但这似乎应该是可以避免的。

codepen

Answer 1

我最近使用的一种方法是在输入旁边添加一个清除按钮，当选择一个值时该按钮变为可见，并在清除模型值时隐藏（单击该按钮会隐藏）

这对我来说效果很好，对用户来说很直观，可以用于其他输入，如文本和日期选择器

Answer 2

更新1：     由于ng-click会在将选项分配到ng-model之前触发，因此请使用ng-change，如下所示

<强> HTML：

<md-select ng-change="clear()" ng-model="topping>
    <md-option ng-value="none"> -- NONE -- </md-option>
     ...

<强> JS：

$scope.clear=function(){
     if($scope.topping=="none")
        $scope.topping=null;
}

更新1结束

你可以这样做：

<强> HTML：

<md-option ng-click="clear()">--NONE--</md-option>

<强> JS：

$scope.clear=function(){
     $scope.topping=null;
}