为什么 AngularJS 在 select 中包含一个空选项？

AngularJS 是一个包含多个内置功能的 Javascript 框架，旨在使开发人员的开发更轻松、更高效。下拉菜单就是其中之一。下拉菜单是一个 GUI 元素，它使用户能够从值列表中选择一个值。当下拉菜单处于活动状态时，会向用户显示一个值列表，一次可以从中选择一个值。选择一个值后，下拉菜单将返回其默认状态。

但是，在使用 AngularJS 下拉菜单时，可以观察到选择下拉菜单中的第一个选项始终为空。请查看以下示例以更好地理解。

例子：

  

    
    

  

    
        GeeksforGeeks
    
      
    
        Dropdown of Programming Languages
    
  
    
        
        
    
  
    
        Notice that the first option 
        in the dropdown in empty.
    
  
    
        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'
            }];
      
        }
    

  

输出：

解释和更正：通常，选项列表被转移到ng-option 。然后这些选项以GUI 格式显示给用户。但是，当ng-model引用的某些值在传输到ng-option的列表中不存在时，则会在 GUI 列表中创建一个空选项，如上所示。纠正此错误的最简单方法是从ng-option列表中引用一个有效值。引用的值必须在列表中可用。
我们可以使用此代码引用有效值。在这里， i将是我们要引用的值的索引。

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

只需在列表下方添加此代码即可从选择中删除空选项。在下面给出的示例中，我们正在修改上面的示例，以便从下拉列表中删除空选项。我们将i的值设置为 1。执行此操作后，空选项将消失，默认选择值将设置为 C++。

例子：

  

    
    

  

    
        GeeksforGeeks
    
      
    
        Dropdown of Programming Languages
    
  
    
        
        
    
  
    Empty option gets removed
  
    
        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
            };
        }
    

  

输出