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 浏览器验证代码(来自discuz)
Jul 17 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
Vue渲染函数详解
Sep 15 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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中定义网站根目录的常用方法
2010/08/08 PHP
php curl基本操作详解
2013/07/23 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
如何在python中实现随机选择
2019/11/02 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
当当网软件测试笔试题
2015/11/24 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
校长先进事迹材料
2014/02/01 职场文书
岗位聘任报告
2015/03/02 职场文书
工作态度检讨书范文
2015/05/06 职场文书