转自：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. 解决new Date的值为Invalid Date、NaN-NaN的问题

    错误代码: let timespan = 1515239514230; let dateTime = new Date(timespan); console.log(dateTime) // 返回 I ...

  2. Java XSSF 导出excel 工具类

    参数解释: title:导出excel标题.headers 导出到excel显示的列头. columns 对应数据库字段 .list 导出数据1.pox中添加依赖 <dependency> ...

  3. pandas学习笔记 - 文件的写入和输出

    # -*- coding: utf-8 -*- """ Created on Tue Aug 28 22:19:26 2018   @author: Dev " ...

  4. [terry笔记]11gR2_DataGuard搭建_拷贝数据文件

    11gR2搭建dataguard环境: 自己做的实验,后续按照rman模式搭建.主备切换.模式调整等实验会陆续发上来. primary: OS:oel 6.4 database:11.2.0.4.0 ...

  5. hdu 2037 贪心

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  6. angularjs 工具方法

    <!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" ...

  7. WebAPI返回数据类型解惑 以及怎样解决Extjs无法解析返回的xml

    最近开始使用WebAPI,上手很容易,然后有些疑惑 1.WebAPI默认返回什么数据类型,json还是xml? 2.怎么修改WebAPI的返回数据类型,我用IE浏览器请 求返回的数据都是JSON格式的 ...

  8. linux下修改完profile文件的环境变量后如何立即生效

    方法1: 让/etc/profile文件修改后立即生效 ,可以使用如下命令: # . /etc/profile 注意: . 和 /etc/profile 有空格 方法2: 让/etc/profile文 ...

  9. js中 '枚举' 的使用

    习惯了.net编程,c#的枚举很好用,无论管理上,可读上,易用上都非常强大. JS作为弱类型解析语言,并没有严格的数据类型限定. “枚举”在JS中并不存在的. 通过定义上,枚举是一种类常量的存在,只不 ...

  10. vue中指令写了一个demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...