脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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);

问题解决！

总结

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

您可能感兴趣的文章:

相关文章

  • AngularJs Injecting Services Into Controllers详解

    AngularJs Injecting Services Into Controllers详解

    本文主要介绍AngularJs Injecting Services Into Controllers的知识,这里整理了一下相关资料，及示例代码，帮助大家学习和理解，有兴趣的小伙伴可以参考下
    2016-09-09
  • angular4 共享服务在多个组件中数据通信的示例

    angular4 共享服务在多个组件中数据通信的示例

    本篇文章主要介绍了angular4 共享服务在多个组件中数据通信的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • angularjs ocLazyLoad分步加载js文件实例

    angularjs ocLazyLoad分步加载js文件实例

    本篇文章主要介绍了angularjs ocLazyLoad分步加载js文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Facade Service暴露commands简化代码逻辑提高可访问性组合性

    Facade Service暴露commands简化代码逻辑提高可访问性组合性

    在 Angular 应用开发中,使用 Facade Service 暴露 commands（命令）以及订阅这些 commands 是一个常见的设计模式,本文将详细介绍在 Facade Service 中如何实现这一目标,并深入探讨相关细节,以及通过实际示例进行说明
    2023-10-10
  • AngularJS数据源的多种获取方式汇总

    AngularJS数据源的多种获取方式汇总

    在AngularJS中获取数据源的方式有很多种，本文给大家整理几种获取数据源的方式，对angularjs获取数据源的方式相关知识感兴趣的朋友一起学习吧
    2016-02-02
  • angular5 子组件监听父组件传入值的变化方法

    angular5 子组件监听父组件传入值的变化方法

    今天小编就为大家分享一篇angular5 子组件监听父组件传入值的变化方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解Angular.js指令中scope类型的几种特殊情况

    详解Angular.js指令中scope类型的几种特殊情况

    AngularJs最重要也是最难理解的模块之一就是它的指令（directive）了，自定义指令配置有很多个参数，下面这篇文章主要介绍了关于Angular.js指令中scope类型的几种特殊情况，需要的朋友可以参考下。
    2017-02-02
  • AngularJS变量及过滤器Filter用法分析

    AngularJS变量及过滤器Filter用法分析

    这篇文章主要介绍了AngularJS变量及过滤器Filter用法,结合实例形式分析了AngularJS变量、过滤器及自定义过滤器的相关用法与注意事项,需要的朋友可以参考下
    2016-11-11
  • Angular JS 生成动态二维码的方法

    Angular JS 生成动态二维码的方法

    这篇文章主要介绍了Angular JS 生成动态二维码的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • 详解Angular的8个主要构造块

    详解Angular的8个主要构造块

    Angular 主要分为八大构造块（也就是八个核心概念）：模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下
    2017-06-06

最新评论