脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular.JS中select下拉框设置value

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

 更新时间：2017年06月20日 09:05:32   作者：实习小编嘿  
select 是 AngularJS 预设的一组directive。下面这篇文章主要给大家介绍了关于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);

问题解决！

总结

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

您可能感兴趣的文章:

相关文章

  • 详解创建自定义的Angular Schematics

    详解创建自定义的Angular Schematics

    本文对 Angular Schematics 进行了介绍，并创建了一个用于创建自定义 Component 的 Schematics ，然后在 Angular 项目中以它为模板演练了通过 Schematics 添加自定义的 Component，感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍

    Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍

    这篇文章主要介绍了Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍的相关资料,需要的朋友可以参考下
    2016-12-12
  • Angular中Lazy Loading懒加载陷阱避坑最佳实践

    Angular中Lazy Loading懒加载陷阱避坑最佳实践

    这篇文章主要为大家介绍了Angular中Lazy Loading懒加载陷阱避坑最佳实践,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • AngularJs的UI组件ui-Bootstrap之Tooltip和Popover

    AngularJs的UI组件ui-Bootstrap之Tooltip和Popover

    这篇文章主要介绍了AngularJs的UI组件ui-Bootstrap之Tooltip和Popover，tooltip和popover是轻量的、可扩展的、用于提示的指令。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 详解AngularJS控制器的使用

    详解AngularJS控制器的使用

    这篇文章主要为大家详细介绍了AngularJS控制器的使用方法，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Javascript基础_标记文字的实现方法

    Javascript基础_标记文字的实现方法

    下面小编就为大家带来一篇Javascript基础_标记文字的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Angular实现跨域(搜索框的下拉列表)

    Angular实现跨域(搜索框的下拉列表)

    angular.js 自带jsonp，实现跨域，下面来实现搜索框的下拉列表功能，本文思路明确，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-02-02
  • Angularjs CURD 详解及实例代码

    Angularjs CURD 详解及实例代码

    这篇文章主要介绍了Angularjs CURD 详解及实例代码的相关资料,需要的朋友可以参考下
    2016-09-09
  • ng-alain表单使用方式详解

    ng-alain表单使用方式详解

    这篇文章主要介绍了ng-alain表单使用方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • angular动态表单制作

    angular动态表单制作

    通过实例代码给大家详细讲述了angular动态表单的制作方法，对此有需要的朋友参考下。
    2018-02-02

最新评论