转: angularjs select 赋值 ng-options配置方式
摘自: http://blog.csdn.net/chwshuang/article/details/53861249
数组方式
数据是数组
$scope.years = [2014, 2015, 2016];
页面元素
<select ng-model="item" ng-options="item as y for y in years">
</select>
设置默认值
如果需要设置默认的选项,可以先设置一个参数:
$scope.item = 2016;
$scope.years = [2014, 2015, 2016];
对象数组方式
数据是对象数组
$scope.sites = [
{site : "baidu", url : "https://www.baidu.com"},
{site : "163", url : "http://www.163.com"},
{site : "sina", url : "http://www.sina.com"}
];
页面元素
<select ng-model="s.site" ng-options="s.site as s.site group by site.group for s in sites">
</select>
设置默认值
如果需要设置默认的选项,可以先设置一个参数:
$scope.site = "163";
$scope.sites = [
{site : "baidu", url : "https://www.baidu.com"},
{site : "163", url : "http://www.163.com"},
{site : "sina", url : "http://www.sina.com"}
];
Key-Vules对象数组方式
数据是对象数组
$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};
页面元素
<select ng-model="myCar" ng-options="y.brand for (x, y) in cars">
</select>
设置默认值
如果需要设置默认的选项,可以先设置一个参数:
$scope.site = "BYD";
$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};
angularjs ng-options官方API
数组类型:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
对象类型:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in ob
转: angularjs select 赋值 ng-options配置方式的更多相关文章
- 表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这种写法就是把组件嵌套改为配置方式
表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这 ...
- AngularJS + CoffeeScript 前端开发环境配置详解
AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
- struts_20_对Action中所有方法、某一个方法进行输入校验(基于XML配置方式实现输入校验)
第01步:导包 第02步:配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...
- ajax跨域访问 java controller 和 cxf(webservice) 配置方式(CORS)
1. controller跨域访问,配置方式 重点在这里: <mvc:cors> <mvc:mapping path="/*" allowed-origins=& ...
- bridged(桥接模式)、NAT(网络地址转换模式)和host-only(主机模式)-VMware下三种网络配置方式
VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模式. 1 ...
- spring 整合 mybatis 中数据源的几种配置方式
因为spring 整合mybatis的过程中, 有好几种整合方式,尤其是数据源那块,经常看到不一样的配置方式,总感觉有点乱,所以今天有空总结下. 一.采用org.mybatis.spring.mapp ...
- 框架源码系列九:依赖注入DI、三种Bean配置方式的注册和实例化过程
一.依赖注入DI 学习目标1)搞清楚构造参数依赖注入的过程及类2)搞清楚注解方式的属性依赖注入在哪里完成的.学习思路1)思考我们手写时是如何做的2)读 spring 源码对比看它的实现3)Spring ...
- Spring-IOC实现【01-XML配置方式】
IOC概念 IoC控制反转(IoC,Inversion of Control), 是一个概念,是一种思想.控制反转就 是对对象控制权的转移,从程序代码本身反转到了外部容器.把对象的创建.初始化. 销毁 ...
随机推荐
- Oracle--缓冲区忙等待事件
一,缓冲区等待事件 缓冲区忙等待是I/O-bound Oracle系统中比较常见的现象,特别是在Oracle STATSPACK报告的前五个忙等待的读(顺序/分散)系统中,如前5个定时事件: % 总和 ...
- Kubernetes 1.13 正式发布,功能亮点一览!
Kubernetes 1.13 正式发布,功能亮点一览! Kubernetes 1.13 正式GA,这是2018年发布的第四次也是最后一次大版本,1.13也是迄今为止发行最快的版本,仅用10周时间 ...
- .NET Core应用中使用分布式缓存及内存缓存
.NET Core针对缓存提供了很好的支持 ,我们不仅可以选择将数据缓存在应用进程自身的内存中,还可以采用分布式的形式将缓存数据存储在一个“中心数据库”中.对于分布式缓存,.NET Core提供了针对 ...
- SVN全局文件过滤规则设置
*/packages */packages/* */.vs/* */.vs */.git/* */.git *.o *.lo *.la *.al .libs *.so *.so.[0-9]* *.a ...
- Visual Studio 2019 for Mac 离线更新方法
当你打开Visual Studio 2019 for Mac检查更新时,如果下载更新包很慢,可以尝试如下操作: 打开Finder(访达),找到~/Library/Caches/VisualStudio ...
- 好用的低延迟vps
ZeptoVM是一个俄罗斯的云提供商, 由于提供了黑龙江北边的机房, 所以延迟比较低 注意一定要选Khabarovsk节点, 这个节点延迟很低, 我在上海延迟大约有70ms 缺点就是比较贵, 按照年付 ...
- python字符串格式化方法%s和format函数
1.%s方法 一个例子 print("my name is %s and i am %d years old" %("xiaoming",18) 输出结果:my ...
- 仓库服务端软件artifactory
https://blog.csdn.net/ZYC88888/article/details/88298904 https://www.jianshu.com/p/a0f55548fddd
- HTML+css基础 Text文本属性
Text文本属性: 1.颜色 color color:red 2.文本缩进 text-indent 属性值 数字+px: text-indent:10px: 3.文本修饰 text-decorati ...
- JavaIO学习:转换流
转换流 1.涉及到的类 InputStreamReader:将InputStream转换为Reader OutputStreamWriter:将Writer转换为OutputStream 2.构造器 ...