摘自: 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. Spring Cloud Zuul记录接口响应数据

    系统在生产环境出现问题时,排查问题最好的方式就是查看日志了,日志的记录尽量详细,这样你才能快速定位问题. 如果需要在Zuul中进行详细的日志记录,这两种日志必不可少. API请求信息 API响应信息 ...

  2. oracle 错误 ORA-00020问题解析

    问题描述 [oracle@xiaowu ~]$ sqlplus / as sysdba SQL*Plus: Release Production on Wed Oct :: Copyright (c) ...

  3. centos 修改语言、时区

    修改时区 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime hwclock -w 修改语言 查看当前语言:echo $LANG vim etc/l ...

  4. 作业帮:给定一个整数数组,找出其中两个数相加等于目标值(去重set)

    题目描述 给定一个整数数组,找出其中两个数相加等于目标值 输入 [1,3,5,7,9,11] 10 输出 1,9 3,7 代码: import java.util.HashMap; import ja ...

  5. 推荐一款移动端小视频App声咖视频

    推荐一款移动端小视频App声咖视频 1 介绍 声咖app,这款软件是一款声音交友社交软件,在上面你可以轻松互动,找到你的知心朋友,并且可以自由添加好友,与其他人互动,让交友更加轻松!, 2 特色功能介 ...

  6. 带lambda参数的宏定义

    我们知道有些宏的参数是表达式,在DEBUG启用的使用,可以输出一些日志,在RELEASE的时候,可以节省性能. 如下的宏定义是基于lambda表达式,可以处理一些复杂的逻辑. #ifdef debug ...

  7. 第31课 std::atomic原子变量

    一. std::atomic_flag和std::atomic (一)std::atomic_flag 1. std::atomic_flag是一个bool类型的原子变量,它有两个状态set和clea ...

  8. Windows10 64位部署odoo12开发环境

    预装Windows10 64位家庭版电脑一台 2019年7月 安装Python,这里的版本选择上有个坑,不要装最新的Python 3.7.x,原因是odoo12依赖pillow 4.0.0库,而这个4 ...

  9. pytorch-04-激活函数

    sigmoid函数: 越大的负数越接近0,越大的正数越接近1缺点:(1)造成梯度消失:该函数在靠近1和0的两端,梯度几乎变成0,梯度下降法:梯度乘上学习率来更新参数,如果梯度接近0,那么没有任何信息来 ...

  10. Spring Boot 如何干掉 if else?

    需求 这里虚拟一个业务需求,让大家容易理解.假设有一个订单系统,里面的一个功能是根据订单的不同类型作出不同的处理. 订单实体: service接口: 传统实现 根据订单类型写一堆的if else: 策 ...