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操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
随机推荐
- Mac JDK 多版本共存
1. 安装各JDK版本,安装后通过Java -version检测是否安装好 2. 打开~/.bash_profile,没有的话创建 vim ~/.bash_profile ...
- maven常用命令总结
搞了多年java 似乎还有些命令 混混沌沌 今儿来总结下 mvn -v 查看版本 mvn -compile 编译当前工程 生成target目录的字节码文件以及报告 mvn -package 将当前工程 ...
- iOS自定义提示弹出框(类似UIAlertView)
菜鸟一枚,大神勿喷.自己在牛刀小试的时候,发现系统的UIAlertView有点不喜欢,然后就自己自定义了一个UIAlertView,基本上实现了系统的UIAlertView,可以根据项目的需求修改UI ...
- 各种java生成word解决方案的优缺点对比
解决方案 优点 缺点 Jacob 功能强大 直接调用VBA接口,程序异常复杂:服务器必须是:windows系统+安装Office:服务器端自动化com接口容易产生死进程造成服务器宕机 Apache P ...
- ImportError: No module named 'httplib'
原因:Python 2.x中的"httplib"模块在Python 3.x中变成了"http.client" 原代码: import httplib impor ...
- c# 常用的面试题
2 .列举ASP.NET 页面之间传递值的几种方式. 答. 1).使用QueryString, 如....?id=1; response. Redirect().... ...
- bzoj3302
树形dp 很明显我们可以枚举一条边,然后求两边的重心,这样是暴力,我们用一些奇怪的方法来优化这个找重心的过程,我们先预处理出来每个点最大和第二的儿子,然后每次把断掉的子树的贡献减掉,每次找重心就是向最 ...
- 【旧文章搬运】遍历EPROCESS中的ActiveProcessLinks枚举进程
原文发表于百度空间,2008-7-25========================================================================== 前面对PEB ...
- linux中vfork对打开文件的处理
vfork和fork fork()函数是拷贝一个父进程的副本,拥有独立的代码段 数据段 堆栈空间 然而vfork是共享父亲进程的代码以及代码段 vfork是可以根据需要复制父进程空间,这样很大程度的提 ...
- UVa 11584 Partitioning by Palindromes (简单DP)
题意:给定一个字符串,求出它最少可分成几个回文串. 析:dp[i] 表示前 i 个字符最少可分成几个回文串,dp[i] = min{ 1 + dp[j-1] | j-i是回文}. 代码如下: #pra ...