0

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

yavg
  • 2,761
  • 7
  • 45
  • 115
  • Possible duplicate https://stackoverflow.com/questions/12932959/remove-values-from-select-list-based-on-condition – Tan Duong Apr 04 '18 at 02:59
  • @TanDuong read my question well. I do not see relationship. I do not need to remove anything based on conditions. I just need to avoid creating a blank space. I ask you please remove this. – yavg Apr 04 '18 at 03:00
  • You can't use `style='display:none'` in option select box. This style will not affect. you just can use javascript to remove this option – Tan Duong Apr 04 '18 at 03:04
  • @TanDuong I do not know how to solve it. That's why I put the question and please remove the duplicate, I do not see what you put in relation to it. – yavg Apr 04 '18 at 03:05

2 Answers2

4

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

A. U.
  • 52
  • 3
terry.qiao
  • 1,959
  • 2
  • 8
  • 10
0

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

Anand Siddharth
  • 967
  • 1
  • 9
  • 30
  • 1
    This is a terrible idea; `ng-options` is designed specifically to be more flexible than `ng-repeat`. The angular team specifically encourages people to use `ng-options` over `ng-repeat` whenever possible. – Claies Apr 04 '18 at 03:17
  • that depends on how you use it, their is no harm in using this way. it solves the problem, anyway it makes sense that using ng-options is better than ng-repeat – Anand Siddharth Apr 04 '18 at 03:19
  • no, this hides the real problem. `''` isn't a value in the list, so it shouldn't ever be what you set your model to. `'' !== null`.... The real solution is to use `null` to represent no option selected. – Claies Apr 04 '18 at 03:21
  • hey. i am suing ur paytm package. i have done evrythng as u said. but wen i click the pay now button the page shows "transaction being processed" and then redirects me to a blank page like payment/api/status. why is it not taking me to paytm website? – Zubair Nazer Oliyat May 09 '18 at 18:10