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操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
随机推荐
- Axure Base 01
名词解释: 线框图:一般就是指产品原型,比如:把线框图尽快画出来和把原型尽快做出来是一个意思. axure元件:也叫axure组件或axure部件,系统自带了一部分最基础常用的,网上也有很多别人做好的 ...
- hihoCoder 1586 Minimum 【线段树】 (ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛)
#1586 : Minimum 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 You are given a list of integers a0, a1, …, a2 ...
- mmwave
毫米波(mmWave) 致力于支持5G应用创新开发,集成在BEEcube BEE7基带平台上的赛灵思256QAM毫米波调制解调器IP为宽带回程原型设计提供完整的开箱即用型解决方案 赛灵思公司 (NAS ...
- ZOJ3209 Treasure Map —— Danc Links 精确覆盖
题目链接:https://vjudge.net/problem/ZOJ-3209 Treasure Map Time Limit: 2 Seconds Memory Limit: 32768 ...
- vue 做登陆页面 ( 登陆成功后去掉注册和登陆按钮 显示用户名)
1.当登陆成功 显示用户名且去掉登陆和注册按钮 2.data里声明 后 就在登陆的方法里调用啦 下面说一下登陆的方法. 1.登陆的按钮代码在第一张图片里 2.登陆的弹出框 3.方法 ps:另一种 ...
- codeforces 437A. The Child and Homework 解题报告
题目链接:http://codeforces.com/problemset/problem/437/A 题目意思:给出四个选项A.B.C.D选项的内容描述,要求选出符合以下条件的一项. (1)如果某个 ...
- html5--6-35 列表和表格
html5--6-35 列表和表格 实例 学习要点 掌握列表和表格的样式设置 表格有关的属性: border-collapse 设置是否把表格边框合并为单一的边框.属性值:separate 默认值/c ...
- java前端学习步骤
前端说的比较好的知乎:https://www.zhihu.com/question/22759296 网站开发绝杀技:https://ke.qq.com/course/20945?from=qqcha ...
- [Selenium] 操作浏览器 Cookies
WebDriver 提供了一系列 Cookies 的操作来获取.填写.删除 Cookies 的方法,节省了多次在登陆页面的查找元素并填写登录信息的时间. 1)获取 Cookies ,并保存到文件中以备 ...
- Harbor安装部署--基于 Docker Distribution 的企业级 Registry 服务
harbor简介 Harbor 是一个企业级 Registry 服务.它对开源的 Docker Registry 服务进行了扩展,添加了更多企业用户需要的功能.Harbor 被设计用于部署一套组织内部 ...