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





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.


Article Tags :