Why does AngularJS include an empty option in select ?

AngularJS is a Javascript framework containing several built-in functionalities, that intends to make the development easier and more efficient for the developers. The dropdown is one of them. A dropdown is a GUI element that enables the user to chose one value from a list of values. When a drop-down is active, a list of values gets displayed to the user, out of which one value can be selected at a time. After a value is selected, the drop-down gets back to its default state.

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.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
        integrity=
        "sha256-ZYJ4XH6kZrqD1MlZWZZmQj6MBe/TvysMc33LPchVuo8="
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <strong>
        Dropdown of Programming Languages
    </strong>
  
    <div ng-App="myApp"
        ng-controller="MyCtrl">
        <select ng-model='form.type'
                ng-options=
        'name.val as name.label for name in allNames'>
        </select>
    </div>
  
    <p>
        Notice that the first option 
        in the dropdown in empty.
    </p>
  
    <script>
        var myApp = angular.module('myApp', []);
      
        function MyCtrl($scope) {
      
            $scope.allNames = [{
                label: 'C',
                val: 'C Language'
            }, {
                label: 'C++',
                val: 'C++ Language'
            }, {
                label: 'Java',
                val: 'Java Language'
            }, {
                label: 'Python',
                val: 'Python Language'
            }, {
                label: 'JavaScript',
                val: 'JavaScript Language'
            }];
      
        }
    </script>
</body>
  
</html>

chevron_right


Output:

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

$scope.form = {type : $scope.allNames[i].val}; 

chevron_right


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++.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
        integrity=
        "sha256-ZYJ4XH6kZrqD1MlZWZZmQj6MBe/TvysMc33LPchVuo8="
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <strong>
        Dropdown of Programming Languages
    </strong>
  
    <div ng-App="myApp" ng-controller="MyCtrl">
        <select ng-model='form.type'
                ng-options=
        'name.val as name.label for name in allNames'>
        </select>
    </div>
  
    <p>Empty option gets removed</p>
  
    <script>
        var myApp = angular.module('myApp', []);
      
        function MyCtrl($scope) {
      
            $scope.allNames = [{
                label: 'C',
                val: 'C Language'
            }, {
                label: 'C++',
                val: 'C++ Language'
            }, {
                label: 'Java',
                val: 'Java Language'
            }, {
                label: 'Python',
                val: 'Python Language'
            }, {
                label: 'JavaScript',
                val: 'JavaScript Language'
            }];
      
            $scope.form = {
                type: $scope.allNames[1].val
            };
        }
    </script>
</body>
  
</html>

chevron_right


Output

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.