angularJs select ng-selected默认选中遇到的坑
本人,程序员妹子一枚,,,,名字中有萌字,简称萌妹子哈,,,首先贴出代码:
同样的方式,用ng-selected用来做回显,但是结果让萌妹我很是诧异,第一个“模板类型”那里的select可正常回显,第二个“生成方式”那里的select回显就不生效,一度怀疑自己犯了低级错误写错代码,于是检查了好几遍,最终无果,于是各种百度,Google,最终简单总结下,有理解原理的童鞋可以告知,感激不尽
去查看源代码会发现,select在没匹配到默认值的情况下,会自动添加<option value="? number:2 ?" selected="selected"></option>这么个东西
解决方式如下:
1、添加ng-init设置默认值
2、用ng-option解决
- $scope.listBuildtype = [{"id":1,"name":"逐条生成"},{"id":2,"name":"汇总生成"}]
以上两种方式,
第一种方式可正常显示设置的默认值,但是此处这个值是动态的,那就无法用这个方法来设置默认值用来做回显了,细心的童鞋会发现,在“生成方式”这个select的外侧div中,此处我添加了一个ng-if的判断,当然这个是根据业务需要做的处理,but就是这个ng-if,让我对这个问题纠结好久呀,害人不浅,,把他换成ng-show之后,用第一种方式就好了,,奇迹般的正常显示了,,我猜测这一定跟angular的渲染机制有关啦,
ng-if会重新渲染dom,ng-show只是对dom渲染一次,用显示隐藏来控制HTML元素,但是不理解为什么重新渲染之后就不能正常回显呢
才疏学浅,,坐等大神们指点一二
推荐第二种方式,,,这个方式百试不厌,,用这种方式也不会出现空选项了<option value="? number:2 ?" selected="selected"></option>
angularJs select ng-selected默认选中遇到的坑的更多相关文章
- angularjs的select使用及默认选中
1 ng-model="standardCourse.showHours"代替name 2 ng-selected = "1"代替selected=" ...
- html select 标签设置默认选中
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- select 使其默认选中文本不为空
```html<select ref="type" v-model="selectedvalue" > <option v-for=" ...
- select遍历list默认选中初始值
<select id="userstatus" name="userstatus"> <c:forEach items=&qu ...
- 如何获取select中的value、text、index相关值 && 如何获取单选框中radio值 && 触发事件 && radio 默认选中
如何获取select中的value.text.index相关值 select还是比较常用的一个标签,如何获取其中的内容呢? 如下所示: <select id="select" ...
- HTML中的<select>标签如何设置默认选中的选项
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- jQuery 设置select默认选中问题
在进行其他操作后,恢复select默认选中 html代码: <select id="shai" style="width:150px;margin:5px 50px ...
- 修改select下拉选的默认选中值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- select获取下拉框的值 下拉框默认选中
本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如: <select class="form-control" id=" ...
随机推荐
- 在web项目中获取ApplicationContext上下文的3种主要方式及适用情况
最近在做web项目,需要写一些工具方法,涉及到通过Java代码来获取spring中配置的bean,并对该bean进行操作的情形.而最关键的一步就是获取ApplicationContext,过程中纠结和 ...
- MaxScale中间件部署数据库读写分离
操作系统:CentOS7 (Core) 数据库:MariaDB-10.2.6-linux-glibc_214-x86_64 MaxScale服务器:192.168.40.134 主服务器:192.16 ...
- login 模块,re 模块
标准三流 标准输入流:sys. stdin # input的底层 标准输出流:sys. stdout # print的底层 标准错误流:sys. stderr # 异常及loggin ...
- SolidWorks学习笔记5创建基准面,基准线,基准点
创建基准面 平面偏移方式 点击参考几何体,点击基准面 第一参考选中时,点击一个参考平面,粉色的 通过三个点 通过一个线和不在改线上的点 经过某一个点和某一个平面平行 一个平面绕一个轴(该轴平行或者在平 ...
- Laravel NPM包的使用
示例:安装sweetalert插件 1.yarn add sweetalert 2.resources/js/bootstrap.js中引入: require('sweetalert'); $(doc ...
- 脚本自动创建ldap账号
背景:客服那边人员流动性大,经常需要配置账号,每次创建账号配置权限比较繁琐. 配置脚本: ldapadduser.sh #!/bin/bash # add ldap user ] || [[ $ -n ...
- centos7基础安装
基础: hostname xxvim /etc/hostname systemctl stop firewalld systemctl disable firewalldsetenforce 0gre ...
- GrapeCity Documents for Excel 与 Apache POI 功能对比
GrapeCity Documents for Excel 与 Apache POI 功能对比 GrapeCity Documents for Excel 是什么? GrapeCity Documen ...
- requests库爬取豆瓣热门国产电视剧数据并保存到本地
首先要做的就是去豆瓣网找对应的接口,这里就不赘述了,谷歌浏览器抓包即可,然后要做的就是分析返回的json数据的结构: https://movie.douban.com/j/search_subject ...
- redis 学习(12)-- redis 发布订阅
redis 发布订阅 发布订阅模式中的角色 发布者(publisher) 订阅者(subscriber) 频道(channel) 如图所示: 发布者发布消息到频道,订阅了频道的订阅者可以收到消息,订阅 ...