9.ng-options
转自: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的更多相关文章
- jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件
支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...
- Flume NG Getting Started(Flume NG 新手入门指南)
Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...
- Andrew NG 机器学习编程作业4 Octave
问题描述:利用BP神经网络对识别阿拉伯数字(0-9) 训练数据集(training set)如下:一共有5000个训练实例(training instance),每个训练实例是一个400维特征的列向量 ...
- Flume NG 配置详解(转)
原文链接:[转]Flume NG 配置详解 (说明,名词对应解释 源-Source,接收器-Sink,通道-Channel) 配置 设置代理 Flume代理配置存储在本地配置文件.这是一个文本文件格式 ...
- 斯坦福大学机器学习(Andrew Ng@2014)--自学笔记
今天学习Andrew NG老师<机器学习>之6 - 6 - Advanced Optimization,做笔记如下: 用fminunc函数求代价函数最小值,分两步: 1.自定义代价函数 f ...
- 【原】Coursera—Andrew Ng机器学习—编程作业 Programming Exercise 4—反向传播神经网络
课程笔记 Coursera—Andrew Ng机器学习—课程笔记 Lecture 9_Neural Networks learning 作业说明 Exercise 4,Week 5,实现反向传播 ba ...
- (原创)Stanford Machine Learning (by Andrew NG) --- (week 4) Neural Networks Representation
Andrew NG的Machine learning课程地址为:https://www.coursera.org/course/ml 神经网络一直被认为是比较难懂的问题,NG将神经网络部分的课程分为了 ...
- Andrew Ng 的 Machine Learning 课程学习 (week4) Multi-class Classification and Neural Networks
这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...
- [C2P2] Andrew Ng - Machine Learning
##Linear Regression with One Variable Linear regression predicts a real-valued output based on an in ...
- 在库中使用schematics——ng add与ng update
起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...
随机推荐
- hibernate N+1
http://www.cnblogs.com/sy270321/p/4769198.html
- Redis散杂记
Redis是一款很火的KV模式的内存数据库,与众不同的特点: 1.数据存储在内存 内存的读取速度仅次于CPU的寄存器.各等级缓存,“英雄”自动敏捷属性,特点就是快.高效.因此不需要类似存储磁盘的数据库 ...
- mysql 密码的破解
现在的主流的数据库一般是mysql ,sql server , oracle. 有的时候我们忘记了数据库密码的时候我们要怎么办,破解别人的数据库的密码的时候我们要怎么搞 忘记密码是一件很头痛的 ...
- 架构思想之CAP原理
由于自己负责后端的设计已经有一段时间,对设计的一些思想和理论有一些理解,但最近被问到什么是CAP时,却一脸懵逼,下来后专门针对CAP架构思想进行了一些专题学习,在这里也将这个概念引入给大家,大家可以有 ...
- HDU 2222 Keywords Search AC自己主动机入门题
单词统计的题目,给出一些单词,统计有多少单词在一个文本中出现,最经典的入门题了. AC自己主动机的基础: 1 Trie. 以这个数据结构为基础的,只是添加一个fail指针和构造fail的函数 2 KM ...
- Atitit.运行cmd 命令行 php
Atitit.运行cmd 命令行 php 1. 运行cmd 命令行,调用系统命令的基础 1 1.1. 实际运行模式 1 1.2. 空格的问题 1 1.3. 中文路径的问题.程序文件读取编码设置 1 1 ...
- MySQ学习笔记之十 NULL值处理
这是MySQL一大特殊之处. 概念上.NULL意味着"没有值"或"未知值",且它被看作有点与众不同的值. 为了測试NULL.你不能使用算术比較运算符比如=.&l ...
- django 笔记14 中间件
用户请求->中间件->urls->views->返回字符串->中间件->用户浏览器 settings MIDDLEWARE里面都是中间件 有的地方叫管道 请求来的时 ...
- Hadoop框架基础(二)
** Hadoop框架基础(二) 上一节我们讨论了如何对hadoop进行基础配置已经运行一个简单的实例,接下来我们尝试使用eclipse开发. ** maven安装 简单介绍:maven是一个项目管理 ...
- (VC)搭建OpenGL编程环境
1.下载glut工具包 opengl需要用到的库.下载glut: http://pan.baidu.com/s/1i4c8sHf 2.安装glut a)解压上面下载到的glut工具包后会得到5个文件, ...