当我有一堆object数据要用下拉框进行显示选择时,可以使用到angularjs中的select中的ng-options的属性。官网网址:https://docs.angularjs.org/api/ng/directive/ngOptions

比如数据为:

"data2":["全场广告商户1","全场广告商户2","二号餐厅","三号咖啡","jhct","xiong","huhu1","绿茶餐厅","江南厨子","新月饭店","鑫益达","bhct","全场广告商户3","柳柳3","商户后台","全场广告商户4","测试","测试2","星巴克","猫屎咖啡","维拉度假别墅"]
页面
<select id="selectCompaney" style="width: 120px" ng-model="company" ng-options="company for company in companyList" ng-change="selectCompaney()">
<option value="">所有商户</option>
</select>
js  ng-model控制company的值,之后根据company的变化跟后台进行数据交互
$scope.companyList = data.data2;
$scope.selectCompaney = function () {
$scope.parkingName = '';
$scope.totalName = $scope.company;
};
 

但是数据为:
"data":[{"parkingName":"啦啦停车场","parkId":"99999888881474167822"},{"parkingName":"软件产业基地停车场","parkId":"0755000021433988491"},
{"parkingName":"正中时代大厦停车场","parkId":"07550000161454379616"},{"parkingName":"哈哈停车场","parkId":"07550000291459830045"
},
{"parkingName":"加油猫","parkId":"78945612301479432508"
},{"parkingName":"后台2","parkId":"18681498421480595335"}
{"parkingName":"测试停车场","parkId":"88888888881481708747"},{"parkingName":"无敌加油站321","parkId":"158273559891482455244"
}]
而我想在页面显示的是parkingName,的值,但是我进行交互的值为parkId的值。

页面:
<select ng-model="parkId" ng-options="park.parkId as park.parkingName for park in openMonthCardList" id="parkingName" ng-change="getOpenParkName()">
<option value="">所有停车场</option>
</select>
js:利用jquery中根据id=parkingName寻找到当前选中的text

  

$scope.getOpenParkName = function(){
$scope.getParkId = $('#parkingName').find('option:selected').text();
console.log($scope.getParkId);
console.log($scope.parkId);
}

 
 

angularjs 下select中ng-options使用的更多相关文章

  1. JS 获取select(多选下拉)中所选值的示例代码

    通过js获取select(多选下拉)中所选值,具体实现如下,有需要的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  2. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  3. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  4. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

  5. AngularJS移动开发中的各种坑

    捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...

  6. AngularJS移动开发中的坑汇总

    使用AngualrJs开发移动App已经快半年了,逐渐积累了非常多AngularJS的问题,特别是对于用惯了Jquery的开发人员,转到AngularJS还是须要克服非常多问题的.不像Jquery那样 ...

  7. angularjs下拉框实现渲染html

    angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下: <body ng-app=& ...

  8. angularjs下拉框空白

    搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" n ...

  9. JS对select动态添加options操作(主流浏览器兼容)

    之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...

随机推荐

  1. POJ 3750 小孩报数问题 (线性表思想 约瑟夫问题 数组模拟运算的 没用循环链表,控制好下标的指向就很容易了)

    小孩报数问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10423   Accepted: 4824 Descripti ...

  2. driver, module以及怎么看他们

    1. driver和module的区别 https://unix.stackexchange.com/questions/47208/what-is-the-difference-between-ke ...

  3. CodeForces-245H:Queries for Number of Palindromes(3-14:区间DP||回文串)

    Times:5000ms: Memory limit:262144 kB 给定字符串S(|S|<=5000),下标由1开始.然后Q个问题(Q<=1e6),对于每个问题,给定L,R,回答区间 ...

  4. ul下的li浮动,如何是ul有li的高度

    此时ul展示的界面为: ①给ul加上一个样式,display:inline-block; <html> <head> <title>float</title& ...

  5. 018--python 函数参数、变量、前向引用、递归

    目录 一.python函数的定义 二.函数参数 三.全局变量和局部变量 四.前向引用 五.递归 一.python函数的定义 python函数是对程序逻辑进行结构化或过程化的一种方法 1 python中 ...

  6. HDU6038:Function(循环群/节+找公式)

    传送门 题意 给出一个\(0\sim n-1\)的排列a,一个\(0\sim {m-1}\)的排列b,询问满足\[f(i)=b_{f(a_i)}~~(0\le i\le n-1)\]的函数的个数 分析 ...

  7. bzoj 2084: [Poi2010]Antisymmetry【回文自动机】

    manacher魔改,hash+二分都好写,但是我魔改了个回文自动机就写自闭了orz 根本上来说只要把==改成!=即可,但是这样一来很多停止条件就没了,需要很多特判手动刹车,最后统计一下size即可 ...

  8. combobox级联检索下拉选择框

    1.效果图 2.前端 @{ ViewBag.Title = "Index"; Layout = null; @*自动筛选下拉框*@ <script src="~/S ...

  9. 鸟哥私房菜基础篇:认识与学习BASH习题

    猫宁!!! 参考链接:http://linux.vbird.org/linux_basic/0320bash.php 鸟哥是为中国信息技术发展做出巨大贡献的人. 1-在 Linux 上可以找到哪些 s ...

  10. 黑客攻防技术宝典web实战篇:测试后端组件习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 某网络设备提供用于执行设备配置的 Web 界面.为什么这种功能通常易于受到操作系统命令注入 ...