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 ...
随机推荐
- 对同层数据进行处理，做成树状图形式的数据结构，并符合elementui中的tree结构
//通过子级的pid找到父级对应的id,制作树状图 var data = [ { id: 1, name: "办公管理", pid: 0 }, { id: 2, name: &qu ...
- 洛谷 P1052 过河 （离散化+dp）
dp非常好想, f[i] = min(f[i-len] + stone[i]) s <= len <= t 然后因为L非常大,所以我就不知道该怎么搞了 我看到m只有100,而L有1e9,我 ...
- 洛谷 P2970 [USACO09DEC]自私的放牧Selfish Grazing
P2970 [USACO09DEC]自私的放牧Selfish Grazing 题目描述 Each of Farmer John's N (1 <= N <= 50,000) cows li ...
- inux 虚拟机桥接模式 静态ip设置，桥接才是王道
修改/etc/sysconfig/network-scripts 目录下的 ifcfg-eth0 [root@yangcb network-scripts]# cat ifcfg-eth0 DEVI ...
- Codeforces 558E 线段树处理字符串内排序
给出长度为n的字符串,m个操作. 每一个操作有三个值 l,r,op. op==1,表示将字符串中[ l ,r ]的部分依照升序排列. op==0,表示将字符串中[ l ,r ]的部分依照降序排列. 输 ...
- POJ--1966--Cable TV Network【无向图顶点连通度】
链接:http://poj.org/problem?id=1966 题意:一个无向图,n个点,m条边,求此图的顶点连通度. 思路:顶点连通度,即最小割点集里的割点数目.一般求无向图顶点连通度的方法是转 ...
- 【Mockplus视频教程】《10分钟玩转Mockplus》
地址:http://doc.mockplus.cn/?p=152
- 从fork面试题開始的思考
一.文章来由 还是按照惯例来说一下文章为什么来的.晚上好基友在网上刷面试题,看到一个有趣的题目,于是開始了研究,就有了这篇文章. 二.进入正题 题目例如以下: #include <stdio.h ...
- .NET 框架简单介绍
初学.NET肯定会有一系列的疑问,比方(下面为自己的疑问): 1) 何为. NET框架.它都包括哪些东西? 2) 程序集是什么.它是怎样在CLR(通用语言执行时)中执行的? 3) C#与VB.NET同 ...
- [BZOJ3884] 上帝与集合的正确用法 (欧拉函数)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3884 题目大意: 给出 M, 求 $2^{2^{2^{2^{...}}}}$ % M ...