CODEWITHSUNDEEP
javascriptangularjs
yavg
yavg

Reputation: 3051

dropdown with <option> blank, when trying to reset it

Maybe this sounds like a repeated question, but I've tried some solutions from other users but in my case nothing works.

I currently have a dropdown that displays a list of departments. I'm trying with the button to reset (clear dropdown), the dropdown has no option selected and only show the default option when nothing has been selected. this function when activated, generates this blank space. what am I doing wrong?

Thank you

<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

Upvotes: 0

Views: 303

Answers (2)

terry.qiao
terry.qiao

Reputation: 2045

Problem:

As mentioned by @Tan Duong, the style display:none does not work in <option>.

Possible Solution:

Use $scope.select_deptos=null; instead of $scope.select_deptos="";

Upvotes: 4

Anand Siddharth
Anand Siddharth

Reputation: 977

Instead of ng-options you can use ng-repeat in option tag

<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="";
}

UPDATE

As suggested by @Claies (Thanks for correcting) According to angular documentation https://docs.angularjs.org/api/ng/directive/select You should prefer using ng-options instead of ng-repeat. NgRepeat is not a good practice. Prefer @terry.qiao 's answer https://stackoverflow.com/a/49642125/4005417

Upvotes: 0

Related Questions