转: 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), 是一个概念,是一种思想.控制反转就 是对对象控制权的转移,从程序代码本身反转到了外部容器.把对象的创建.初始化. 销毁 ...
随机推荐
- [LeetCode] 670. Maximum Swap 最大置换
Given a non-negative integer, you could swap two digits at most once to get the maximum valued numbe ...
- 推荐:python科学计算pandas/python画图库matplotlib【转】
机器学习基础3--python科学计算pandas(上) 地址:https://wangyeming.github.io/2018/09/04/marchine-learning-base-panda ...
- windows下zookeeper安装并发布成windows服务
https://blog.csdn.net/yzy199391/article/details/80605195
- 向github项目push代码后,Jenkins实现其自动构建
配置Jenkins(添加Github服务器) 1.进入[系统管理] --> [系统设置] ,找到[Github] 2.添加Github服务器 这里需要github提供一个密钥文本,我们去gith ...
- Code Review最佳实践(转)
我一直认为Code Review(代码审查)是软件开发中的最佳实践之一,可以有效提高整体代码质量,及时发现代码中可能存在的问题.包括像Google.微软这些公司,Code Review都是基本要求,代 ...
- pytest_demo_实战1
1.根目录配置 pytest.ini [pytest] addopts = -p no:warnings 2.更改运行手势,系统配置 file -> setting -> Tools -& ...
- Java面试-TCP连接及其优化
作为一个后端程序员,网络连接这块是一个绕不过的砍,当你在做服务器优化的时候,网络优化也是其中一环,那么作为网络连接中最基础的部分-TCP连接你了解吗?今天我们来仔细看看这个部分. TCP建立连接-三次 ...
- JS操作摄像头
<script src="javascript/jquery-1.9.1.min.js"></script> <fieldset> <le ...
- 《STL源码剖析》——Array
array array本身内容较少,日常使用也不是很多,里面也没有很高深的技巧 1 array的基本架构 了解array的架构需要一个额外的语法知识: int a[100]; int [100]b; ...
- IIS8.5中的强制https直接修改web.config文件和顶级域名跳转www和过滤子目录不强制跳转
亲测可用 <?xml version="1.0" encoding="UTF-8"?> <configuration> <syst ...