However, while working with AngularJS dropdown, it was observed that the first option in the select dropdown is always empty. Have a look at the following example for better understanding.
Explanation and Correction: Generally, a list of options is transferred to ng-option. Those options are then displayed to the user in GUI format. However, when some value referenced by the ng-model doesn’t exist in the list transferred to the ng-option, then an empty option gets created in the GUI list, which can be seen above. The easiest way to correct this error is to reference a valid value from the ng-option list. The value referenced must be available on the list.
We can reference a valid value using this code. Here, i will be the index of the value that we want to reference.
Just add this code below the list to remove the empty option from the select. In the example given below, we are modifying the above example, in such a way that the empty option gets removed from the drop-down. We will set the value of i to 1. After doing this, the empty option will disappear and the default selected value will be set to C++.
- AngularJS | ng-include Directive
- AngularJS | Select Boxes
- Include Bootstrap in AngularJS using ng-bootstrap
- How to select first object in object in AngularJS?
- How to include one CSS file in another?
- PHP | (Include and Require)
- Include v/s Extend in Ruby
- @include vs @extend in SASS
- What is the best way to include CSS file? Why use @import?
- How to include() all PHP files from a directory ?
- SASS | @mixin and @include
- Scala | Option
- HTML | option Tag
- HTML | DOM Option Object
- HTML | option value Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.