0

I am coding an Angular app and want to make a select dropdown element which does not display the value within the element. In other words, I just want the arrow, which will then display the dropdown of all the available values. I will then use Angular data binding to display the value above the element.

This is for two reasons:

  1. I am experiencing a common Angular problem of selected values appearing as though the user has selected the value beneath it. With this bug, the actual value is correct, but the select element displays the wrong value, at least until it is re-selected. Given that the correct value is actually selected, the data binding will always display the correct value.

This problem exists in different browsers between iOS and Android. I have added workarounds (such as adding an additional blank option) that fix the problem in a couple of cases, but it is still present in the latest iOS.

  1. Additionally, I am making a time selection dropdown (normal select element, not time input) which I want to only be in 15 minute increments. Sometimes the user will need to use 5, 7.5 or 10 minute increments, but these will be added using up and down incrementer buttons on either side. This is so the list is not blown out by many, many tiny options and is instead only 15 minute blocks. Displayed above the element is the time. At present, when the incrementer buttons increase the value to be between the 15 minute blocks, the displayed select value goes blank, which doesn't look good.

I may possibly also prefer to just display a placeholder constantly in the select box such as 'Select Time'.

The options are generated by ng-options.

Thanks a lot for your help.

J Dawg
  • 525
  • 1
  • 5
  • 14
  • You may want to check specific libraries such as select2 or some datepickers. You may not find a perfect one, covering all cases on all browsers, maybe maybe need to work a bit the different cases. – floribon Feb 07 '15 at 07:30
  • Thanks, Floribon. Select 2 looks useful but can't solve this issue, unfortunately. – J Dawg Feb 08 '15 at 02:10

1 Answers1

2

Not an Angular way, but vanilla JS does it pretty easily.

For not showing any value selected in the dropdown, just set the selectedIndex as -1.

Demo:

document.getElementById("mySelect").selectedIndex = "-1";
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • That's not really the angular way – yangli-io Feb 07 '15 at 08:12
  • Thanks a lot for that. Now, is there a way to display something like 'Select time' or another placeholder of some sort? – J Dawg Feb 07 '15 at 11:23
  • @JDawg Please refer [this answer](http://stackoverflow.com/a/5859221/586051) for your question. In this case, you wouldnt need any JS code like the one that I added. – Rahul Desai Feb 07 '15 at 11:30