当我有一堆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. 时光轴一之listView实现时光轴效果

    尼玛.非要搞什么时光轴,一想简单的不就是个listView吗,然后一步一步来就好了,哈哈别看那么好看事实上不要想多了. 时光轴timeline最大的作用就是把过去的事物系统化.完整化.精确化.时间轴可 ...

  2. mysql表分区 partition

    表分区 partition 当一张表的数据非常多的时候,比如单个.myd文件都达到10G, 这时,必然读取起来效率降低. 可不可以把表的数据分开在几张表上? 1: 从业务角度可以解决.. (分表,水平 ...

  3. java包和javax包的区别

    基本类库和扩展类库 一般的lang,util都放在java.包 servlet放在javax包 以前sun把java中的叫核心库,把javax中的叫扩展库.现在sun已经把java和javax中的都叫 ...

  4. HDU 2222 Keywords Search(瞎搞)

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  5. (C)inline关键字

      背景(C&C++中) 一.inline关键字用来定义一个类的内联函数,引入它的主要原因是用它替代C中表达式形式的宏定义. 表达式形式的宏定义一例:#define ExpressionNam ...

  6. (linux)块设备驱动程序

      1.4.1  Linux块设备驱动程序原理(1) 顾名思义,块设备驱动程序就是支持以块的方式进行读写的设备.块设备和字符设备最大的区别在于读写数据的基本单元不同.块设备读写数据的基本单元为块,例如 ...

  7. CSS中的那点事儿(一)--- CSS中的单位1

    单位主要用在规定元素的数值性css属性的,这里主要讨论应用的比较多的是width height  padding margin font-size,而单位中应用最广泛就是%.px.em 百分比 百分比 ...

  8. java中Math常用方法

    public class Demo{ public static void main(String args[]){ /** *Math.sqrt()//计算平方根 *Math.cbrt()//计算立 ...

  9. codeforces 450B. Jzzhu and Sequences 解题报告

    题目链接:http://codeforces.com/problemset/problem/450/B 题目意思:给出 f1 和 f2 的值,以及n,根据公式:fi = fi-1 + fi+1,求出f ...

  10. The Castle

    链接 分析:先暴力求出联通块数和最大联通块包含多少,接着对于每个位置判断去掉其上下左右的四个位置的墙之后的最大联通块数,并且记得先选最西,然后选最南的顺序了来输出 /* PROB:castle ID: ...