Why does AngularJS include an empty option in select ?
AngularJS is a Javascript framework containing several built-in functionalities, that intend 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 choose 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 the AngularJS dropdown, it was observed that the first option in the select dropdown is always empty. Have a look at the following example for a better understanding.
Example 1: The below example illustrates an empty option in the select menu in AngularJS.
HTML
<!DOCTYPE html> <html> <head> <script src= integrity= "sha256-ZYJ4XH6kZrqD1MlZWZZmQj6MBe/TvysMc33LPchVuo8=" crossorigin="anonymous"> </script> </head> <body> <h1 style="color:green;"> zambiatek </h1> <h3> Dropdown of Programming Languages </h3> <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> |
Output:
Explanation and Correction: Generally, a list of options are transferred to ng-option directive. Those options are then displayed to the user in GUI format. However, when some value referenced by the ng-model directive 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 example. 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 the below code. Here, i will be the index of the value that we want to reference.
$scope.form = {type : $scope.allNames[i].val};
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 2: This example illustrates removing the empty option by selecting an initial value in the controller in AngularJS.
HTML
<!DOCTYPE html> <html> <head> <script src= integrity= "sha256-ZYJ4XH6kZrqD1MlZWZZmQj6MBe/TvysMc33LPchVuo8=" crossorigin="anonymous"> </script> </head> <body> <h1 style="color:green;"> zambiatek </h1> <h3> Dropdown of Programming Languages </h3> <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> |
Output:
