转自：https://www.cnblogs.com/best/tag/Angular/

该指令允许你基于一个迭代表达式添加选项

<select ng-model="color" ng-options="c.name for c in colors">

<option>--请选择--</option>

</select>

ng-model必须要指定，默认情况下被选择的值就是当前对象，没有value的项将被清除。

示例代码：

 <!DOCTYPE html>

 <!--指定angular管理的范围-->

 <html ng-app="app01">

     <head>

         <meta charset="UTF-8">

         <title>指令</title>

     </head>

     <body>

         <!--指定控制器的作用范围-->

         <form ng-controller="Controller1" name="form1">

             <h3>基础下拉列表：</h3>

             <p>

                 <select ng-model="user1" ng-options="u.name for u in users">

                     <option value="">--请选择--</option>

                 </select>

                 <span> {{user1}}</span>

             </p>

             <h3>带分组的下拉列表：</h3>

             <p>

                 <select ng-model="user2" ng-options="u.name group by u.sex for u in users">

                     <option  value="">--请选择--</option>

                 </select>

                 <span> {{user2}}</span>

             </p>

             <h3>组合的下拉列表：</h3>

             <p>

                 <select ng-model="user3" ng-options="(u.name+u.age+'岁') group by u.sex for u in users">

                     <option  value="">--请选择--</option>

                 </select>

                 <span> {{user3}}</span>

             </p>

             <h3>自定义ng-model的值：</h3>

             <p>

                 <select ng-model="user4" ng-options="u.id as u.name group by u.sex for u in users">

                     <option  value="">--请选择--</option>

                 </select>

                 <span> {{user4}}</span>

             </p>

         </form>

         <!--引入angularjs框架-->

         <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             //定义模块，指定依赖项为空

             var app01 = angular.module("app01", []);

             //定义控制器，指定控制器的名称，$scope是全局对象

             app01.controller("Controller1", function($scope) {

                 $scope.users = [{

                     id: 1,

                     name: "tom",

                     sex: "男",

                     age: 19

                 }, {

                     id: 2,

                     name: "rose",

                     sex: "女",

                     age: 18

                 }, {

                     id: 7,

                     name: "jack",

                     sex: "男",

                     age: 16

                 }, {

                     id: 9,

                     name: "lucy",

                     sex: "女",

                     age: 20

                 }, {

                     id: 15,

                     name: "mark",

                     sex: "男",

                     age: 89

                 }];

             });

         </script>

     </body>

 </html>

运行结果：

9.ng-options的更多相关文章

  1. jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件

    支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...

  2. Flume NG Getting Started（Flume NG 新手入门指南）

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

  3. Andrew NG 机器学习编程作业4 Octave

    问题描述:利用BP神经网络对识别阿拉伯数字(0-9) 训练数据集(training set)如下:一共有5000个训练实例(training instance),每个训练实例是一个400维特征的列向量 ...

  4. Flume NG 配置详解（转）

    原文链接:[转]Flume NG 配置详解 (说明,名词对应解释 源-Source,接收器-Sink,通道-Channel) 配置 设置代理 Flume代理配置存储在本地配置文件.这是一个文本文件格式 ...

  5. 斯坦福大学机器学习（Andrew Ng@2014）--自学笔记

    今天学习Andrew NG老师<机器学习>之6 - 6 - Advanced Optimization,做笔记如下: 用fminunc函数求代价函数最小值,分两步: 1.自定义代价函数 f ...

  6. 【原】Coursera—Andrew Ng机器学习—编程作业 Programming Exercise 4—反向传播神经网络

    课程笔记 Coursera—Andrew Ng机器学习—课程笔记 Lecture 9_Neural Networks learning 作业说明 Exercise 4,Week 5,实现反向传播 ba ...

  7. （原创）Stanford Machine Learning (by Andrew NG) --- (week 4) Neural Networks Representation

    Andrew NG的Machine learning课程地址为:https://www.coursera.org/course/ml 神经网络一直被认为是比较难懂的问题,NG将神经网络部分的课程分为了 ...

  8. Andrew Ng 的 Machine Learning 课程学习 (week4) Multi-class Classification and Neural Networks

    这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...

  9. [C2P2] Andrew Ng - Machine Learning

    ##Linear Regression with One Variable Linear regression predicts a real-valued output based on an in ...

  10. 在库中使用schematics——ng add与ng update

    起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...

随机推荐

  1. CF666E Forensic Examination（后缀自动机+线段树合并）

    给你一个串S以及一个字符串数组T[1..m],q次询问,每次问S的子串S[pl..pr]在T[l..r]中的哪个串里的出现次数最多,并输出出现次数. 如有多解输出最靠前的那一个. 我们首先对m个字符串 ...

  2. mysql 修改默认的引擎

      需求: mysql 的默认的引擎为MyISAM  虽然该引擎访问的速度快,但并不支持存储事物,也不支持外键,所以我们修改为innob Linux修改MySql默认存储引擎为InnoDB     一 ...

  3. unix中文件I/O

    在unix中可用的文件I/O函数包含打开文件,读文件,写文件等. Unix系统中的大多数文件I/O须要用到5个函数:open,read,write,lseek,close. 这里要说明的是read,w ...

  4. hdoj-5099-Comparison of Android versions

    Comparison of Android versions Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...

  5. SQL Server 运行计划操作符具体解释（3）——计算标量(Compute Scalar)

    接上文:SQL Server 运行计划操作符详细解释(2)--串联(Concatenation ) 前言: 前面两篇文章介绍了关于串联(Concatenation)和断言(Assert)操作符,本文介 ...

  6. Android 流量分析 tcpdump &amp; wireshark

    APP竞争已经白热化了,控制好自己Android应用的流量能够给用户一个良好的用户体验噢,给用户多一个不卸载的理由. Android 怎样进行流量分析?用好tcpdump & wireshar ...

  7. BZOJ4259: 残缺的字符串 & BZOJ4503: 两个串

    [传送门:BZOJ4259&BZOJ4503] 简要题意: 给出两个字符串,第一个串长度为m,第二个串长度为n,字符串中如果有*字符,则代表当前位置可以匹配任何字符 求出第一个字符串在第二个字 ...

  8. poj--2083--Fractal(dfs)

    Fractal Time Limit: 1000MS   Memory Limit: 30000KB   64bit IO Format: %I64d & %I64u Submit Statu ...

  9. word 的使用 —— 分页符与分节符

    节的概念:节定义了一些格式, 如页边距.页面的方向.页眉和页脚,以及页码的顺序. 分节符是指为表示节的结尾插入的标记. 分节符的作用: 分节符起着分隔其前后文本格式的作用,如果删除了某个分节符,它前面 ...

  10. Deleting elements

    There are several ways to delete elements from a list. If you know the index of the element you want ...