ng-option指令使用记录，设置默认值需要注意
数组作为数据源：
- 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
<select ng-model="myColor1" ng-options="color.name as color.name for color in colors"></select>
这是ng-options表达式的基本形式，形如"<标签>" for <项目> in <数组or对象>这样的形式，angularjs会为数组中的每一个对象生成一个option元素，并且将其值设置到标签中去。
选择一个列表时ng-model的值会指向select元素的当前选中项的value值.
对于这个select元素会生成如下的HTML：
<select ng-model="myColor1" ng-options="color.name as color.name for color in colors" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="0" label="black">black</option>
<option value="1" label="white">white</option>
<option value="2" label="red">red</option>
<option value="3" label="blue">blue</option>
<option value="4" selected="selected" label="yellow">yellow</option>
</select>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-controller="myCtrl">
Color :<select ng-model="myColor1" ng-options="color.name as color.name for color in colors"></select><br>
Color :<select ng-model="myColor2" ng-options="color.name for color in colors"></select><br/>
Color grouped by shade:
<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
<option value="">-- choose color --</option>
</select><br/>
</body>
<script src="angular.js"></script>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.colors = [
{name: 'black', shade: 'dark'},
{name: 'white', shade: 'light'},
{name: 'red', shade: 'dark'},
{name: 'blue', shade: 'dark'},
{name: 'yellow', shade: 'light'}
];
$scope.myColor1 = "yellow"; // 此种方式设置默认值时需要修改ng-options color.name as color.name
$scope.myColor2 = $scope.colors[2]; // 设置默认值
})
</script>
</html>
ng-options="color.name as color.id for color in colors"
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-controller="myCtrl">
<select ng-model="val" ng-options="item[0] for item in arr"></select>
</body>
<script src="angular.js"></script>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.arr=[
[11,12,13,14],
[21,22,23,24],
[31,32,33,34],
[41,42,43,44]
];
$scope.val = $scope.arr[0];//设置默认值
})
</script>
</html>
track by提高ng-repeat的渲染性能，ng-option同样也支持track by。
对下拉框进行排序可以使用orderBy过滤器;
测试code如下：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select{width: 80px;}
</style>
</head>
<body ng-controller="myCtrl">
<select ng-model="val" ng-options="item.label for item in arr | orderBy:'id' track by item.id"></select>
</body>
<script src="angular.js"></script>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.arr=[
{id:4,label:31},
{id:3,label:22},
{id:1,label:11},
{id:5,label:41},
{id:2,label:21}
];
$scope.val = $scope.arr[0];//设置默认值
})
</script>
</html>
总结
接触一个指令学习一个指令，如何设置默认值需要注意，顺手总结在这里，也是一种学习。
ng-option指令使用记录，设置默认值需要注意的更多相关文章
- select2 取值 遍历 设置默认值
select2 取值 遍历 设置默认值 本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法.Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题.但同时,Sel ...
- select2 插件编辑时设置默认值
function htDate(selectCustomerId, val) { var customerId = selectCustomerId; var values = val; ajaxJs ...
- MySql折腾小记二：text/blog类型不允许设置默认值，不允许存在两个CURRENT_TIMESTAMP
From: http://www.cnblogs.com/cyq1162/archive/2011/05/17/2049055.html 在 CYQ.Data 数据框架的反向工程中,遇到MySQL的问 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (14) -----第三章 查询之查询中设置默认值和存储过程返回多结果集
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-6在查询中设置默认值 问题 你有这样一个用例,当查询返回null值时,给相应属性 ...
- EF Core1.0 CodeFirst为Modell设置默认值!
当我们使用CodeFirst时,有时候需要设置默认值! 如下 ; public string AdminName {get; set;} = "admin"; public boo ...
- 使用mysql 命令行，增加 ，删除 字段 并 设置默认值 及 非空
使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空 添加 alter table table_name add field_name field_type; 添加,并设置默认值,及非 ...
- java 反射： 当Timestamp类型的属性值为null时，设置默认值
import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Metho ...
- Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数
Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数 7.4.4 为外部参数设置默认值 开发者也可以对外部参数设置默认值.这时,调用的时候,也可以省略参数传递本文选自Swift1 ...
- MVC4中给TextBoxFor设置默认值和属性
例如:(特别注意在设置初始值的时候 Value 中的V要大写) @Html.TextBoxFor(model => model.CustomerCode, new { Value=" ...
随机推荐
- Open-Test 测试驱动模式与版本号管理机制
以测试用例驱动项目开发,coding/case俩条线并走模式. 1.开发人员只负责功能实现: 2.测试人员提供自测用例,研发人员jenkins持续集成项目后自动化执行自测用例,通过后方可转测试 ...
- NodeJS使用mysql
1.环境准备 手动添加数据库依赖: 在package.json的dependencies中新增, "mysql" : "latest", { "nam ...
- 使用Jenkins配置Git+Maven的自动化构建
Jenkins是一个开源的持续集成工具,应用Jenkins搭建持续集成环境,可以进行自动构建.自动编译和部署,非常方便. 在服务器比较少的情况下,Jenkins的优势并不明显,但是随着项目发展,服务器 ...
- BZOJ 2119: 股市的预测 [后缀数组 ST表]
2119: 股市的预测 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 331 Solved: 153[Submit][Status][Discuss ...
- .NET跨平台：在Ubuntu上用自己编译的dnx运行ASP.NET 5示例程序
在 Linux Ubuntu 上成功编译 dnx 之后,会在 artifacts/build/ 文件夹中生成 dnx-coreclr-linux-x64/ 与 dnx-mono/ 这2个文件夹,前者是 ...
- web前端的春天 or 噩梦
「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...
- 微信硬件H5面板开发(一) ---- 调用openApi
微信硬件平台是微信推出连接物与人,物与物的IOT解决方案.也就是说可以通过微信控制各种智能设备.比如一些蓝牙设备.空调.电视等等. 我本身不懂硬件(虽然是电子信息专业),硬件是北航的两个研究生在弄,小 ...
- ABP(现代ASP.NET样板开发框架)系列之17、ABP应用层——参数有效性验证
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之17.ABP应用层——参数有效性验证 ABP是“ASP.NET Boilerplate Project (ASP. ...
- 测试计划（Test Plan）
测试计划(Test Plan) 版权声明:本文为博主原创文章,未经博主允许不得转载. 测试计划的概念: 测试计划是一个文档,描述了进行测试的测试范围,测试策略和方法,测试资源和进度.是对整个测试活动进 ...
- Hybrid App技术批量制作APP应用与跨平台解决方案
前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述下对于前 ...