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

前言

本文主要给大家介绍的是关于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> 

但是有个问题,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); 

问题解决!

总结

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

时间: 2017-06-19

angularjs 实现带查找筛选功能的select下拉框实例

一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析:    目标 在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele

AngularJS Select(选择框)使用详解

1.Select概述 AngularJS 中可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出 <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select> </div> <

angularjs的select使用及默认选中设置

我最近在研究angularjs学习的道路上,那么今天也算个学习笔记吧! 1 ng-model="standardCourse.showHours"代替name 2 ng-selected = "1"代替selected="selected",但问题是select下会多出一个无用的option 3 在数据准备时设置,$scope.standardCourse.showHours= '1'; 解决多出的一个无用的option <label fo

Angular 中 select指令用法详解

最近在angular中使用select指令时,出现了很多问题,搞得很郁闷.查看了很多资料后,发现select指令并不简单,决定总结一下. select用法: <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明: 发现并没有ng-change属性 ng-

AngularJS入门教程之Select(选择框)详解

AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://a

Angularjs实现带查找筛选功能的select下拉框示例代码

前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功

AngularJS基础 ng-selected 指令简单示例

AngularJS ng-selected 指令 AngularJS 实例 获取选中的选项: 点击复选框选择 BMW 选项: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

Angular2中select用法之设置默认值与事件详解

本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.设置默认值: 现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的select值就可以在下拉框默认选中 code1: 设置"请选择"为默认项,只需要把变量student设置为'',即可默认到"请选择",需要注意的是 <option value="">请选择</option>

Vue props中Object和Array设置默认值操作

我就废话不多说,看代码吧~ seller: { type: Object, default() { return {} } } seller: { type: Object, default: function () { return {} } } 当父组件没有传这个值或者值是空时,输出的话,返回: 下面这种是错误的 seller: { type: Object, default: () => {} } 当父组件没有传这个值或者值是空时,输出的话,这时是返回underfind,在template

C++函数参数取默认值的深入详解

一般情况下,在函数调用时形参从实参那里取得值,因此实参的个数应与形参相同.有时多次调用同一函数时用同样的实参,C++提供简单的处理办法,给形参一个默认值,这样形参就不必一定要从实参取值了.如有一函数声明float area(float r=6.5);指定r的默认值为6.5,如果在调用此函数时,确认r的值为6.5,则可以不必给出实参的值,如area( );  //相当于area(6.5);如果不想使形参取此默认值,则通过实参另行给出.如area(7.5); //形参得到的值为7.5,而不是6.5这

CMD中使用attrib命令设置文件只读、隐藏属性详解

本文介绍一个cmd下的一个attrib.exe的小程序,它可以用来设置文件的属性.我们知道文件的属性有只读.隐藏.系统.存档和无内容索引等5个,只读和隐藏用得比较多,另外三个用得比较少. 不知道大家有没有用过attrib.exe这个cmd下的小程序,它可以用来设置文件的属性.先来看看它的帮助文件. 复制代码 代码如下: C:\Users\splaybow>help attrib 显示或更改文件属性. ATTRIB [+R | -R] [+A | -A ] [+S | -S] [+H | -H]

element-ui中的select下拉列表设置默认值方法

element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来 那如何修改呢? 上element-ui中的代码片段 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key=&qu

使用jQuery给input标签设置默认值

由于项目需求,简单地写了一个input默认值设置,实现给.form中所有的input设置默认值的方法. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>input默认值设置</title> <script type="text/javascript" src="http://apps.bdimg.com/li

AngularJS select设置默认值的实现方法

AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-app="noteApp" ng-controller="noteCtrl"> <head> <meta http-equiv="keywords" content="keyword1,keyword2,keyword

Mysql select语句设置默认值的方法

1.在没有设置默认值的情况下: 复制代码 代码如下: SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果: 设置显示默认值: 复制代码 代码如下: SELECT userinfo.id, user_name, role, adm_regionid, IFNUL

mysql中datetime类型设置默认值方法

通过navicat客户端修改datetime默认值时,遇到了问题. 数据库表字段类型datetime,原来默认为NULL,当通过界面将默认值设置为当前时间时,提示"1067-Invalid default value for 'CREATE_TM'",而建表的时候,则不会出现这个问题,比如建表语句: CREATE TABLE `app_info1` ( `id` bigint(21) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键ID', `a

Angular中ng-options下拉数据默认值的设定方法

今天学习了一下Angular中ng-options下拉数据默认值的设定方法,留个笔记 直接上代码 <div class="form-group"> <label class="col-sm-2 control-label">教师</label> <div class="col-sm-10"> <select style="display:block; width:100%; heig