摘自: 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. python实现的WebSocket客户端

    code #coding=utf- import json import time from websocket import create_connection ws = create_connec ...

  2. nacos服务注册与发现及服务配置实现

    Nacos 提供了一组简单易用的特性集,可快速实现动态服务发现.服务配置.服务元数据及流量管理. 更敏捷和容易地构建.交付和管理微服务平台. 关键特性: 服务发现和服务健康监测 动态配置服务 动态 D ...

  3. Redis学习之ziplist压缩列表源码分析

    一.压缩列表ziplist在redis中的应用 1.做列表键 当一个列表键只包含少量列表项,并且每个列表项要么是小整数,要么是短字符串,那么redis会使用压缩列表作为列表键的底层实现 2.哈希键 当 ...

  4. 【linux】CentOS 查看系统时间,修改时区

    ===============CentOS 7.6================ 1.查看系统时间 date 查看当前系统时间以及时区结果是: Mon Jul 8 09:23:31 UTC 2019 ...

  5. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

  6. jQuery浮窗图片到页面中间的代码

    jQuery浮窗图片到页面中间的代码 <!doctype html> <html> <head> <meta charset="utf-8" ...

  7. Java基础笔记之String相关知识

    (二)String Sring 被声明为 final ,因此不可被继承. String的不可变性: 看String的定义(java9版本): public final class String imp ...

  8. 新一代ActiveMQ —— Apache ActiveMQ Artemis

    资料: .net demo : https://github.com/apache/activemq-artemis/tree/master/examples/protocols/amqp/dotne ...

  9. 使用order by和group by的分析

    mysql 写sql的顺序:         select -> from-> where->group by->having->order by.  但mysql的解析 ...

  10. 4种引用与垃圾回收 :StrongReference, SoftReference, WeakReference , PhantomReference