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在一段文字中的光标处插入其他文字
Aug 26 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
js逆向解密之网络爬虫
May 30 Javascript
JavaScript实现随机点名小程序
Oct 29 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
PHP简洁函数小结
2011/08/12 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
python调用Delphi写的Dll代码示例
2017/12/05 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
财务助理岗位职责
2013/11/10 职场文书
交通安全教育制度
2014/02/02 职场文书
运动会稿件200字
2014/02/07 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
全国文明单位申报材料
2014/05/31 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
董事长助理岗位职责
2015/02/11 职场文书
银行招聘自荐信
2015/03/06 职场文书
感恩教师主题班会
2015/08/12 职场文书