摘自: 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配置方式的更多相关文章

  1. 表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这种写法就是把组件嵌套改为配置方式

    表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这 ...

  2. AngularJS + CoffeeScript 前端开发环境配置详解

    AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...

  3. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  4. struts_20_对Action中所有方法、某一个方法进行输入校验(基于XML配置方式实现输入校验)

    第01步:导包 第02步:配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...

  5. ajax跨域访问 java controller 和 cxf(webservice) 配置方式(CORS)

    1. controller跨域访问,配置方式 重点在这里: <mvc:cors> <mvc:mapping path="/*" allowed-origins=& ...

  6. bridged(桥接模式)、NAT(网络地址转换模式)和host-only(主机模式)-VMware下三种网络配置方式

    VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模式. 1 ...

  7. spring 整合 mybatis 中数据源的几种配置方式

    因为spring 整合mybatis的过程中, 有好几种整合方式,尤其是数据源那块,经常看到不一样的配置方式,总感觉有点乱,所以今天有空总结下. 一.采用org.mybatis.spring.mapp ...

  8. 框架源码系列九:依赖注入DI、三种Bean配置方式的注册和实例化过程

    一.依赖注入DI 学习目标1)搞清楚构造参数依赖注入的过程及类2)搞清楚注解方式的属性依赖注入在哪里完成的.学习思路1)思考我们手写时是如何做的2)读 spring 源码对比看它的实现3)Spring ...

  9. Spring-IOC实现【01-XML配置方式】

    IOC概念 IoC控制反转(IoC,Inversion of Control), 是一个概念,是一种思想.控制反转就 是对对象控制权的转移,从程序代码本身反转到了外部容器.把对象的创建.初始化. 销毁 ...

随机推荐

  1. Codechef August Challenge 2019 Division 2

    Preface 老年菜鸡终于开始打CC了,由于他太弱了所以只能打Div2 因为台风的原因challenge并没有写,所以水了个Rank7 A Football SB模拟题不解释 #include< ...

  2. Web协议详解与抓包实战:HTTP1协议-如何管理跨代理服务器的长短连接?(4)

    一.HTTP 连接的常见流程 二.从 TCP 编程上看 HTTP 请求处理 三.短连接与长连接 四.Connection 仅针对当前连接有效 五.代理服务器对长连接的支持 未设置代理服务器 设置代理 ...

  3. spring cloud gateway 全局过滤器

    全局过滤器作用于所有的路由,不需要单独配置,我们可以用它来实现很多统一化处理的业务需求,比如权限认证,IP访问限制等等. 接口定义类:org.springframework.cloud.gateway ...

  4. 【微信小程序】 小程序中的递归运算/二分查找算法/Maximum call stack size exceeded

    摘要: 小程序中的递归运算/二分查找算法/Maximum call stack size exceeded 场景:最近做一个车贷计算器, 其中存在一个公式如下: /**** 总金额 * 月利率 * ( ...

  5. java ++和--

    public class Sample { public static void main(String[] args) { , num2 = ; , num4 = ; System.out.prin ...

  6. CPU、内存、磁盘的瓶颈(转载文)

    1.如何判断CPU.内存.磁盘的瓶颈? CPU瓶颈1) 查看CPU利用率.建议CPU指标如下 a) User Time:65%-70% b) System Time:30%-35% c) Idle:0 ...

  7. Oracle--SMON

    一,SMON功能 a) 系统监控管理,定期合并空闲,回收临时段: b) 做实例的恢复:前滚.回滚.释放资源 二,SMON什么时候做恢复? 数据修改随时发生,但是数据同步定期做:所以会产生脏块(灰块), ...

  8. .NetCore 使用k8s部署服务的过程中需要注意的地方以及遇到的问题

    这里开始我准备了3台测试服务器,这里我使用了JumpServer管理起来了,这里我们来看下: Master :192.168.0.236 Node1:192.168.0.237 Node2:192.1 ...

  9. (十四)golang--函数和包

    1.怎么定义函数? func (形参列表) 返回值列表{ 执行操作 return } 2.什么是包? 包的本质就是一个文件夹,存放程序文件 三大作用: 区分相同的名字的函数.变量等标识符: 当程序文件 ...

  10. LeetcCode 27:移除元素 Remove Element(python、java)

    公众号:爱写bug 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) ...