加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS select首项空白问题解决方案

发布时间:2020-12-17 09:15:00 所属栏目:安全 来源:网络整理
导读:原因 ng-model绑定的是后台的默认项,与select中是不同的引用。意思也就是说,现在select中没有初始值,所以会有空白。 解决方案 肯定是给select的赋初始值。 方法一: 用ng-options 语句加as,ng-init来初始化select 或者 在控制器中初始化 ng-model="sysTy

原因

ng-model绑定的是后台的默认项,与select中是不同的引用。意思也就是说,现在select中没有初始值,所以会有空白。

解决方案

肯定是给select的赋初始值。

方法一:用ng-options 语句加as,ng-init来初始化select 或者 在控制器中初始化

ng-model="sysType" ng-init="sysType=1" ng-options="x.id as x.type for x in sysNames"

缺点:失去了对象的优势,选择的是字符串。

方法二:在select中加一个value值为空的option

<select ng-model="selectedSite">

<option value="">请选择</option><!-- 这里是重点,必须将value值设置成空字符串,否则第一个选项还是会留空白出来-->

<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>

</select>


缺点:增加了多余的代码,不想有请选择时,这种方法不适合。


方法三:在控制器中给option赋初始值


<select ng-model="selectedSite">

<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>

</select> 


$scope.selectedSite=$scope.sites[0].url;<!-- 这里只要把想要第一次出来的url放在这里就可以实现option默认出现的效果了-->


用这种方法改动html少点。所以选择了这种。


参考了一些网上的资料,总结如上。

这篇比较好:http://blog.csdn.net/linzhiqiang0316/article/details/52489668


更新于2017.7.19

相关知识:

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,它有以下优势:

使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读