转自：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. /lib64和/usr/lib64和/usr/local/lib64的区别

    简单说,/lib64是内核级的,/usr/lib64是系统级的,/usr/local/lib64是用户级的. /lib/ — 包含许多被 /bin/ 和 /sbin/ 中的程序使用的库文件.目录 /u ...

  2. 2015 Multi-University Training Contest 3 hdu 5317 RGCDQ

    RGCDQ Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  3. [MST] Defining Asynchronous Processes Using Flow

    In real life scenarios, many operations on our data are asynchronous. For example, because additiona ...

  4. [Javascript] Transduce over any Iteratable Collection

    So far we've been transducing by manually calling .reduce() on arrays, but we want to be able to tra ...

  5. hibernate 或jpa 中使用 AliasToBeanResultTransformer 自定义类型转换ResultTransformer 下划线转驼峰

    jpa中使用 sql查询时,返回结果直接转为实体bean的实现, 需要自定义一个ResultTransformer,如下, import java.util.Arrays; import org.ap ...

  6. less14 颜色函数2

    less div{ // hue()色相值 z-index: hue(hsl(90,100%,50%)); //90 ////saturation()饱和度 z-index: saturation(h ...

  7. sublime text3 3143注册码

    注册码: -– BEGIN LICENSE -– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 ...

  8. hpuoj--校赛--与学妹滑雪（最短路+精度判断）

    问题 G: 感恩节KK专场--与学妹滑雪 时间限制: 1 Sec  内存限制: 128 MB 提交: 284  解决: 25 [提交][状态][讨论版] 题目描述 这周下的雪好大好大,不过这正和KK学 ...

  9. k-meas非监督聚类分析

    实验名称: k-meas非监督聚类分析   一.实验目的和要求 目的: 加深对非监督学习的理解和认识 掌握聚类方法K-Means算法的设计方法   要求:     根据聚类数据,采用k-Means聚类 ...

  10. benchmark测试PostgreSQL数据库OLTP性能

    1,安装配置PostgreSQL数据库 2,下载地址:http://sourceforge.net/projects/benchmarksql/?source=navbar Required:JDK7 ...