教程:为什么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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值