angularjs 下select中ng-options使用
当我有一堆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使用的更多相关文章
- JS 获取select(多选下拉)中所选值的示例代码
通过js获取select(多选下拉)中所选值,具体实现如下,有需要的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- 下拉框select中option居中样式
下拉框select中option居中样式 text-align:center;text-align-last:center;
- AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题
场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...
- AngularJS移动开发中的各种坑
捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...
- AngularJS移动开发中的坑汇总
使用AngualrJs开发移动App已经快半年了,逐渐积累了非常多AngularJS的问题,特别是对于用惯了Jquery的开发人员,转到AngularJS还是须要克服非常多问题的.不像Jquery那样 ...
- angularjs下拉框实现渲染html
angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击.但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下: <body ng-app=& ...
- angularjs下拉框空白
搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" n ...
- JS对select动态添加options操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
随机推荐
- POJ 3750 小孩报数问题 (线性表思想 约瑟夫问题 数组模拟运算的 没用循环链表,控制好下标的指向就很容易了)
小孩报数问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10423 Accepted: 4824 Descripti ...
- driver, module以及怎么看他们
1. driver和module的区别 https://unix.stackexchange.com/questions/47208/what-is-the-difference-between-ke ...
- 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,回答区间 ...
- ul下的li浮动,如何是ul有li的高度
此时ul展示的界面为: ①给ul加上一个样式,display:inline-block; <html> <head> <title>float</title& ...
- 018--python 函数参数、变量、前向引用、递归
目录 一.python函数的定义 二.函数参数 三.全局变量和局部变量 四.前向引用 五.递归 一.python函数的定义 python函数是对程序逻辑进行结构化或过程化的一种方法 1 python中 ...
- HDU6038:Function(循环群/节+找公式)
传送门 题意 给出一个\(0\sim n-1\)的排列a,一个\(0\sim {m-1}\)的排列b,询问满足\[f(i)=b_{f(a_i)}~~(0\le i\le n-1)\]的函数的个数 分析 ...
- bzoj 2084: [Poi2010]Antisymmetry【回文自动机】
manacher魔改,hash+二分都好写,但是我魔改了个回文自动机就写自闭了orz 根本上来说只要把==改成!=即可,但是这样一来很多停止条件就没了,需要很多特判手动刹车,最后统计一下size即可 ...
- combobox级联检索下拉选择框
1.效果图 2.前端 @{ ViewBag.Title = "Index"; Layout = null; @*自动筛选下拉框*@ <script src="~/S ...
- 鸟哥私房菜基础篇:认识与学习BASH习题
猫宁!!! 参考链接:http://linux.vbird.org/linux_basic/0320bash.php 鸟哥是为中国信息技术发展做出巨大贡献的人. 1-在 Linux 上可以找到哪些 s ...
- 黑客攻防技术宝典web实战篇:测试后端组件习题
猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 某网络设备提供用于执行设备配置的 Web 界面.为什么这种功能通常易于受到操作系统命令注入 ...