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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
js 处理URL实用技巧
Nov 23 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 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
德生H-501的评价与改造
2021/03/02 无线电
.htaccess文件保护实例讲解
2011/02/06 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
js实现消息滚动效果
2017/01/18 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
python 图片验证码代码
2008/12/07 Python
Python 调用DLL操作抄表机
2009/01/12 Python
使用python分析git log日志示例
2014/02/27 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
详解python和matlab的优势与区别
2019/06/28 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python集合操作方法详解
2020/02/09 Python
Python中的__init__作用是什么
2020/06/09 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
创建省级文明单位实施方案
2014/02/27 职场文书
节约用水的口号
2014/06/20 职场文书
刑事辩护词范文
2015/05/21 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang