ng-options用法详解
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择。当select中一个选项被选择,该选项将会被绑定到ng-model。如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection[3]。
之前一直在用ng-repeat就见到过track by,没有去了解它的用法,这次了解了一下。track by主要是防止值有重复,angularjs会报错。因为angularjs需要一个唯一值来与生成的dom绑定,以方便追踪数据。例如:items=[“a”,“a”,“b”],这样ng-repeat=“item in items”就会出错,而用ng-repeat=“(key,value) in items track by key”就不会出现错误了。
ng-options一般有以下用法:
对于数组:
- label for value in array
- select as label for value in array
- label group by group for value in array
- label disable when disable for value in array
- label group by group for value in array track by trackexpr
- label disable when disable for value in array track by trackexpr
- label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)
- 对于对象:
- label for (key , value) in object
- select as label for (key ,value) in object
- label group by group for (key,value) in object
- label disable when disable for (key, value) in object
- select as label group by group for(key, value) in object
- select as label disable when disable for (key, value) in object
一个简单的例子:
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}
];
$scope.myColor = $scope.colors[2]; // red
}]);
</script>
<div ng-controller="ExampleController">
<ul>
<li ng-repeat="color in colors">
<label>Name: <input ng-model="color.name"></label>
<label><input type="checkbox" ng-model="color.notAnOption"> Disabled?</label>
<button ng-click="colors.splice($index, 1)" aria-label="Remove">X</button>
</li>
<li>
<button ng-click="colors.push({})">add</button>
</li>
</ul>
<hr/>
<label>Color (null not allowed):
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
</label><br/>
<label>Color (null allowed):
<span class="nullable">
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>
</span></label><br/>
<label>Color grouped by shade:
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
</select>
</label><br/>
<label>Color grouped by shade, with some disabled:
<select ng-model="myColor"
ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
</select>
</label><br/>
Select <button ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</button>.
<br/>
<hr/>
Currently selected: {{ {selected_color:myColor} }}
<div style="border:solid 1px black; height:20px"
ng-style="{'background-color':myColor.name}">
</div>
</div>
ng-options用法详解的更多相关文章
- linux mount命令参数及用法详解
linux mount命令参数及用法详解 非原创,主要来自 http://www.360doc.com/content/13/0608/14/12600778_291501907.shtml. htt ...
- Ubuntu kill命令用法详解
转自:Ubuntu kill命令用法详解 1. kill 作用:根据进程号杀死进程 用法: kill [信号代码] 进程ID root@fcola:/# ps -ef | grep sen ...
- linux sed命令参数及用法详解
linux sed命令参数及用法详解 http://blog.csdn.net/namecyf/article/details/7336308 1. Sed简介 sed 是一种在线编辑器,它一次处理一 ...
- linux curl用法详解
linux curl用法详解 curl的应用方式,一是可以直接通过命令行工具,另一种是利用libcurl库做上层的开发.本篇主要总结一下命令行工具的http相关的应用, 尤其是http下载方面 ...
- C#的String.Split 分割字符串用法详解的代码
代码期间,把代码过程经常用的内容做个珍藏,下边代码是关于C#的String.Split 分割字符串用法详解的代码,应该对码农们有些用途. 1) public string[] Split(params ...
- Delphi TStringHelper用法详解
Delphi TStringHelper用法详解 (2013-08-27 22:45:42) 转载▼ 标签: delphi_xe5 it 分类: Delphi Delphi XE4的TStringHe ...
- Delphi XE4 TStringHelper用法详解
原文地址:Delphi XE4 TStringHelper用法详解作者:天下为公 Delphi XE4的TStringHelper,对操作字符串进一步带来更多的方法,估计XE5还能继续用到. Syst ...
- IP命令的用法详解
IP命令的用法详解 原创 2017-06-29 10:02:34 0932 摘自:http://www.php.cn/linux-371363.html ip命令是Linux下较新的功能强大的 ...
- grep用法详解:grep与正则表达式【转】
转自:http://blog.csdn.net/hellochenlian/article/details/34088179 grep用法详解:grep与正则表达式 首先要记住的是: 正则表达式与通配 ...
- Vue插件编写、用法详解(附demo)
Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...
随机推荐
- 【QSBOJ】字符串编辑
题目链接:https://bbs.csdn.net/topics/390289884?page=1 AC代码: #include<bits/stdc++.h> using namespac ...
- Spring声明式事物原理分析
基础准备 pom <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...
- Product of Polynomials
题意:多项式相乘,合并同类项后输出每一项的系数. 题目链接:https://www.patest.cn/contests/pat-a-practise/1009 分析:注意合并后系数为0,这一项就不存 ...
- 第1节 网站点击流项目(上):4、网站的数据采集,使用flume的taildir实现多个文件的监控采集
一. 模块开发----数据采集 1. 需求 在网站web流量日志分析这种场景中,对数据采集部分的可靠性.容错能力要求通常不会非常严苛,因此使用通用的flume日志采集框架完全可以满足需求. 2. Fl ...
- office2019激活办法
@echo off (cd /d "%~dp0")&&(NET FILE||(powershell start-process -FilePath '%0' -ve ...
- eclipse springboot运行helloworld错误: 找不到或无法加载主类 xxx.xxx.xxx
这个错误,在网上搜找了好久,说是什么jar包冲突,什么环境配置,我经过验证均是正确的,javac java java -version 都没问题,环境变量也OK,各种解释均没有能够解决我的问题,最后好 ...
- CC3200 飞行计划
CC3200 飞行计划 2016-01-25 CC3200 资源 CC3200_JTAG调试 CC3200-Uniflash 烧写程序 Mosquitto搭建MQTT 服务器 [示例] CC3200_ ...
- 036、Java中三目运算符的使用
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- CSS:导航栏下拉菜单模板
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- 官网英文版学习——RabbitMQ学习笔记(四)Work queues
工作队列:把每个任务只发送给一个工作者. 上一篇我们是从一个指定的队列发送接收消息,在本文中,我们将创建一个工作队列,用于在多个工作者之间分配耗时的任务. 工作队列(即任务队列)背后的主要思想是避免立 ...