转自：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. npm 6.0.0 版本npminstall报npm:write after end错误

    这两个多月一直开发小程序,今天准备开发公众号,使用Vue-cli 脚手架搭建项目时候, npm install 就报错误,我就奇葩了!心里一万个曹尼玛....... 因为之前使用安装包的提示升级,自己 ...

  2. 有趣的console

    博文第一篇,就以前端调试的“座上客”---console开始

  3. BZOJ 3129 [SDOI2013]方程 (拓展Lucas)

    题目大意:给定一个方程$X_{1}+X_{2}+X_{3}+X_{4}+...+X_{n}=M$,$\forall X_{i}<=A_{i} (i<=n1)$ $\forall X_{i} ...

  4. Linux创建用户和随机密码

    #!/bin/bash#批量创建10个系统帐号并设置密码rm -f user.logfor name in `seq 10`do #非交互式的输入随机密码 password=`echo $RANDOM ...

  5. puppet介绍与安装

    puppet是什么puppet是一种基于ruby语言开发的Lnux.Unix.windows平台的集中配置管理系统.它使用自有的puppet描述语言,可管理配置文件file.用户user.cron任务 ...

  6. 【BZOJ 1269】 [AHOI2006]文本编辑器editor

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] /* [move k] 指令.直接 把pos改成k.表示改变光标位置 [insert n s],在pos后面插入一个长度为n的字符串 ...

  7. Qt之图形（简笔画-绘制卡通蚂蚁）

    简述 关于简笔画的介绍很多,有动物.水果.蔬菜.交通工具等,通常会对绘制一步步进行拆分.组合.然后绘制为我们想要的结果. 下面来介绍另外的一个种类:昆虫类-卡通蚂蚁. 简述 绘制 效果 源码 绘制 效 ...

  8. reactor模式与java nio

     Reactor是由Schmidt, Douglas C提出的一种模式,在高并发server实现中广泛採用. 改模式採用事件驱动方式,当事件出现时,后调用对应的事件处理代码(Event Handl ...

  9. Android Shape使用

    说明 在Android开发中,使用shape可以很方便的帮我们画出想要的背景,相对于png图片来说,使用shape可以减少安装包的大小,而且能够更好的适配不同的手机. 使用 先贴出官网上的说明: &l ...

  10. 登录安全验证+AJAX认证服务--流程图