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
使用事例如下:select element
<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-model的值,就可以使用 xxx.name as xxx.id 
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>
orderBy,track by

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指令使用记录,设置默认值需要注意的更多相关文章

  1. select2 取值 遍历 设置默认值

    select2 取值 遍历 设置默认值 本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法.Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题.但同时,Sel ...

  2. select2 插件编辑时设置默认值

    function htDate(selectCustomerId, val) { var customerId = selectCustomerId; var values = val; ajaxJs ...

  3. MySql折腾小记二:text/blog类型不允许设置默认值,不允许存在两个CURRENT_TIMESTAMP

    From: http://www.cnblogs.com/cyq1162/archive/2011/05/17/2049055.html 在 CYQ.Data 数据框架的反向工程中,遇到MySQL的问 ...

  4. 《Entity Framework 6 Recipes》中文翻译系列 (14) -----第三章 查询之查询中设置默认值和存储过程返回多结果集

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-6在查询中设置默认值 问题 你有这样一个用例,当查询返回null值时,给相应属性 ...

  5. EF Core1.0 CodeFirst为Modell设置默认值!

    当我们使用CodeFirst时,有时候需要设置默认值! 如下 ; public string AdminName {get; set;} = "admin"; public boo ...

  6. 使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空

    使用mysql 命令行,增加 ,删除 字段 并 设置默认值 及 非空 添加 alter table table_name add field_name field_type; 添加,并设置默认值,及非 ...

  7. java 反射: 当Timestamp类型的属性值为null时,设置默认值

    import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Metho ...

  8. Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数

    Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数 7.4.4  为外部参数设置默认值 开发者也可以对外部参数设置默认值.这时,调用的时候,也可以省略参数传递本文选自Swift1 ...

  9. MVC4中给TextBoxFor设置默认值和属性

    例如:(特别注意在设置初始值的时候 Value 中的V要大写) @Html.TextBoxFor(model => model.CustomerCode, new { Value="  ...

随机推荐

  1. 将树苺派升级到Raspbian 8 (Jessie)

    我的树苺派2B跑的是Raspbian 7 (Wheezy),有不少软件都让我觉察出老旧来.想着Debian官方已经发布Debian 8 (Jessie)大半年了(8.0发布于2015/04/25),树 ...

  2. PowerDesign设置列名与表名的大小写规则

    因为设计的Model是要用到Oracle 11g的,Oracle 11g的表名和列名默认是大写,在设计模型当中小写转大写一直很苦闹,发现PowerDedign可以直接设置,见下文: 打开Tools-- ...

  3. uoj #139. 【UER #4】被删除的黑白树 dfs序 贪心

    #139. [UER #4]被删除的黑白树 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/139 Descript ...

  4. IE浏览器下安装firebug

    第一步: 将一个网址拖动到地址收藏栏: 第二步: 第三步: 将路径改为:javascript: var dd = (window["inIframe"] || window).do ...

  5. js判断移动端与pc端

    这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: if(device.mobile()){ wi ...

  6. 对lua中_ENV表的理解(lua5.2版本以后)

    当我拿到_ENV表的时候,会去想这个_ENV表是干什么用的? 首先看如下代码: print(_ENV) --0x1d005f0 print(_G) --0x1d005f0 ViewCode 看了上面的 ...

  7. CPP--借助神器VS理解内存存储

    之前也有想了解这些,第一个不是学底层的不知道从何理解,第二个上网搜概念,大牛们三言两语就结束了,举得例子也比较复杂,对于非C方向的可能有点吃力,所以一直没理解. 今天偶然发现原来还要内存窗口之说,就慢 ...

  8. Springboot整合log4j2【详细步骤】

    1.去除logback中的依赖包 <dependency> <groupId>org.springframework.boot</groupId> <arti ...

  9. 《十天学会单片机和C语言编程》

    <十天学会单片机和C语言编程> 大家注意了这个文件只有最新版迅雷可以下载,下面的lesson几就是第几课.点击右键使用迅雷下载. ed2k://|file|[十天学会单片机和C语言编程]. ...

  10. dockerfile创建php容器(安装memcached、redis、gd、xdebug扩展)

    dockerfile创建php容器(含有memcached.redis.gd.xdebug扩展) 代码如下: FROM php:7.2-fpm COPY redis-3.1.6.tgz /home/r ...