转: 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), 是一个概念,是一种思想.控制反转就 是对对象控制权的转移,从程序代码本身反转到了外部容器.把对象的创建.初始化. 销毁 ...
随机推荐
- 一次失败的尝试:arm(aarch64架构)上使用docker运行Gogs
环境 Ubuntu aarch64(好像是arm8的一种) Docker安装指南:https://docs.docker.com/install/linux/docker-ce/ubuntu/ Gog ...
- 团队作业第五次—项目冲刺-Day3
Day3 part1-SCRUM: 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunte ...
- ascii码对照表(收藏)
https://blog.csdn.net/yueyueniaolzp/article/details/82178954 十进制代码 十六进制代码 MCS 字符或缩写 DEC 多国字符名 ASCII ...
- java 解决safari下载中文文件名乱码
主要就是在响应头设置content-disposition,主要遵循 RFC 5987标准. response.setHeader("content-disposition",&q ...
- 想让自己的项目6666,可是 Chrome 不答应!
读万卷书,行万里路!有的技能可以从书里学会,有的技能却需要在实战中打怪升级慢慢掌握,今天就来和大家聊一个很多小伙伴经常遇到的问题. 缘起 有人向松哥反映,在搭建微服务分布式配置中心 Spring Cl ...
- vue引入bootstrap、jquery
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- THUSC2019去不了记
因为泥萌都去SC了,就我在学校里考水考模拟,所以这就变成了水考模拟游记了 Day1 早上本来要到教室早读,发现教室被由年级前\(100\)的非竞赛生的dalao给占据了,发现聪聪在里面,于是进去愉快的 ...
- Eureka和ZooKeeper的区别
首先我们先说下: RDBMS==>(MySql,Oracle,SqlServer等关系型数据库)遵循的原则是:ACID原则(A:原子性.C:一致性.I:独立性.D:持久性.). NoSql==& ...
- 关于宝塔面板windows版6.2的一些使用心得
关于宝塔面板windows版6.2的一些使用心得 第一次使用windows版本的 给客户搭建 asp+mssql的需求 心得1 安装 server2012 基于python开发的,所以安装的 ...
- net core 记录自定义端口多个方式
1.直接修改 . 2.代码定义 public class Program { public static void Main(string[] args) { CreateWebHostBuilder ...