Question

也许这听起来像是一个重复的问题，但我尝试过其他用户的一些解决方案但在我的情况下没有任何效果。

我目前有一个显示部门列表的下拉列表。我正在尝试使用按钮重置（清除下拉列表），下拉菜单中没有选择任何选项，只显示默认选项时没有选择任何内容。激活此功能后，会生成此空白区域。我做错了什么？

谢谢

<select   ng-model="select_deptos"  ng-options="item as item.NOMBRE_DPT for item in aDepartamentos track by item.DPTO" ng-change="fn_setSemestreFiltro('departamento')">
   <option value='' style="display:none;">Select</option>
</select>
<button ng-click="clear()">clear dropdown</button>

$http({
  method: 'GET',
  url: 'depto.json'
}).then(function successCallback(response) {
        $scope.aDepartamentos=response.data;
})

$scope.clear=function(){
  $scope.select_deptos="";
}

http://plnkr.co/edit/BUTDCjanKb4xVIaIVMcp?p=preview

Answer 1

<强>问题：

正如@Tan Duong所提到的，display:none样式在<option>中工作。

可能的解决方案：

使用$scope.select_deptos=null;代替$scope.select_deptos="";

Answer 2

您可以在选项标记

中使用ng-repeat而不是ng-options

<select   ng-model="select_deptos" ng-change="fn_setSemestreFiltro('departamento')">
   <option value='' >Select</option>
   <option ng-repeat='item in aDepartments' ng-value='item.DPTO'>{{item.DPTO}}</option>
</select>
<button ng-click="clear()">clear dropdown</button>

$http({
  method: 'GET',
  url: 'depto.json'
}).then(function successCallback(response) {
        $scope.aDepartamentos=response.data;
})

$scope.clear=function(){
  $scope.select_deptos="";
}

<强>更新

正如@Claies所建议的那样（感谢您的纠正）根据角度文件 https://docs.angularjs.org/api/ng/directive/select 您应该更喜欢使用ng-options而不是ng-repeat。 NgRepeat不是一个好习惯。更喜欢@ terry.qiao的回答https://stackoverflow.com/a/49642125/4005417

尝试重置时，使用<option>空白下拉列表

2 个答案: