Angular.JS中select下拉框设置value的方法


Posted in Javascript onJune 20, 2017

前言

本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容,非常出来供大家参考学习,下面来一起看看详细的介绍:

最近在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令:

<select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="detectUnit.name for detectUnit in detectQueryFilters.detectUnits"> 
   <option value="">全部</option> 
</select>

Angular.JS中select下拉框设置value的方法

但是有个问题,ng-options指令仅仅设置了下拉框选项的text,而不是value,打印下拉框的内容如下:

<option value="" class="">全部</option> 
<option value="0">董浜惠健净菜</option> 
<option value="1">古里绿品公司</option> 
<option value="2">曹家桥物流公司</option> 
<option value="3">董浜农服中心</option>

value部分是自动设置的0,1,2,3,并不是实际的id。

那么,Angualr js 怎样设置下拉框的value呢?

网上查了一遍,结合自己的一点探索,找到了答案,类似于表格记录的用法

<select id="selectDetectUnit" class="form-control" ng-model="filter.detectUnitId" > 
  <option value="">全部</option> 
 <option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="{{detectUnit.id}}">{{detectUnit.name}}</option> 
</select>

打印下拉框的内容如下:

<option value="">全部</option>        
<!-- ngRepeat: detectUnit in detectQueryFilters.detectUnits --> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160101" class="ng-scope ng-binding">董浜惠健净菜</option> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160102" class="ng-scope ng-binding">古里绿品公司</option> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160103" class="ng-scope ng-binding">曹家桥物流公司</option> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160104" class="ng-scope ng-binding">董浜农服中心</option> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160105" class="ng-scope ng-binding">港南村7组</option>

虽然option中多了一些属性,看着有点复杂,不过value总算有了正确的值。

然后试着取值:

alert($scope.filter.detectUnitId);

Angular.JS中select下拉框设置value的方法

问题解决!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript中的字符串操作详解
Nov 12 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
vue使用video.js进行视频播放功能
Jul 18 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
原生js二级联动效果
Jun 20 #Javascript
angularjs下拉框空白的解决办法
Jun 20 #Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 #Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 #Javascript
详解vue-resource promise兼容性问题
Jun 20 #Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 #Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
js自带函数备忘 数组
2006/12/29 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
JS 控件事件小结
2012/10/31 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
jQuery链使用指南
2015/01/20 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
机械制造毕业生求职信
2014/03/03 职场文书
银行职员自我鉴定
2014/04/20 职场文书
2015年教师节慰问信
2015/03/23 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技