教程：为什么Angular Dropdown会自动添加空值

角度选择具有空值

通常，我在Angular中实现select（下拉列表）时遇到了这个问题。在这里，我试图了解为什么Angular在选择列表的开头添加一个空值。

让我们开始你有这样的代码。

< select  class = “form-control”  ng-model = “selectedName_noinit”  ng-options = “employee.id as employee.name for employee in employees” > </ select >

$scope.employees  被定义为.js文件中具有属性id 和的数组  name。

这可能会产生类似于：

< select  class = “form-control”  ng-model = “selectedName_noinit”  ng-options = “employee.id as employee.name for employee in employees” >

            < option  value = “？”  selected = “selected” > </ option >

            < option  value = “0” > Name1 </ option >

            < option  value = “1” > Name2 </ option >

            < option  value = “2” > Name3 </ option >

</ select >

 

问题出现了：为什么我们得到一个带有值的选项而里面没有文字？

这是因为您的模型  selectedName没有使用有效值初始化，或者在这种情况下，根本没有初始化。为了不选择默认的实际值，Angular会生成一个空选项并默认选择它

如何解决这个问题

有两种方法可以解决这些常见问题

例如：

< select  class = “form-control”  ng-model = “selectedName”  ng-options = “employee.id as employee.name for employee in employees”  ng-init = “” > </ select >

在此代码中，我们指定了初始值  selectedName。在  ng-init 我们将值0指定为下拉列表的选定值。

< select  class = “form-control”  ng-model = “selectedName”  ng-options = “employee.id as employee.name for employee in employees”  ng-init = “” >

            < option  value = “0”  selected = “selected” > Name1 </ option >

            < option  value = “1” > Name2 </ option >

            < option  value = “2” > Name3 </ option >

</ select >

或者，我们可以使用以下JavaScript行：

$ scope。selectedName  =  0 ;

 

我们可以selectedName 在控制器中定义初始值  ，因此它将生成：

< select  class = “form-control”  ng-model = “selectedName”  ng-options = “employee.id as employee.name for employee in employees” >

            < option  value = “0”  selected = “selected” > Name1 </ option >

            < option  value = “1” > Name2 </ option >

            < option  value = “2” > Name3 </ option >

</ select >

请注意，  ng-init 允许功能。所以你可以调用一个函数，  initSelect()它可以等待另一个值进行初始化  selectedName。