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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
js中this对象用法分析
Jan 05 Javascript
vue配置多页面的实现方法
May 22 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
原生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
基于mysql的论坛(3)
2006/10/09 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python定时任务sched模块用法示例
2018/07/16 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
python实现爬山算法的思路详解
2019/04/09 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
python try...finally...的实现方法
2020/11/25 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
高中生的自我鉴定范文
2014/01/24 职场文书
生物制药自我鉴定
2014/01/25 职场文书
标准自荐信范文
2014/01/29 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL