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. Git快速入门

    如果你不想看长篇的Git教程,想快速了解Git的使用,那么本文可能会对你入门Git有所帮助.由于笔者用的是Windows系统,所以本文只写Git在Windows上的使用. 一.Git安装 去Git官网 ...

  2. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  3. mysql集群（双主）

    0.安装 所谓双主基本可以理解为两台服务器互为主备,其核心思路与主备配置相同. 服务器A: 内网IP: 10.44.94.219 服务器B: 内网IP: 10.44.94.97 1.配置服务器A lo ...

  4. 一种简单的CQRS架构设计及其实现

    一.为什么要实践领域驱动? 近一年时间我一直在思考一个问题:"如何设计一个松耦合.高伸缩性.易于维护的架构?".之所以有这样的想法是因为我接触的不少项目都是以数据库脚本来实现业务逻 ...

  5. C++ std::list

    std::list template < class T, class Alloc = allocator > class list; List Lists are sequence co ...

  6. SQL Server中TOP子句可能导致的问题以及解决办法

    简介      在SQL Server中,针对复杂查询使用TOP子句可能会出现对性能的影响,这种影响可能是好的影响,也可能是坏的影响,针对不同的情况有不同的可能性.      关系数据库中SQL语句只 ...

  7. Java学习之LinkedHashMap学习总结

    前言: 在学习LRU算法的时候,看到LruCache源码实现是基于LinkedHashMap,今天学习一下LinkedHashMap的好处以及如何实现lru缓存机制的. 需求背景: LRU这个算法就是 ...

  8. JavaScript:正则表达式 前瞻

    正向前瞻:用来捕获出现在特定字符之前的字符,只有当字符后面跟着某个特定字符才去捕获它.(?=) 负向前瞻:它用匹配只有当字符后面不跟着某个特定字符时才去匹配它.(?!) 在执行前瞻和负向前瞻之类的运算 ...

  9. 查看当前数据库正在运行的Session

    当数据库运行比较缓慢时,我们需要实时查看当前有什么Session在运行,获得信息越完整,对于分析低性能的原因越有帮助.根据之前调优的经历,简单几步分析如下: 1.通过SQL Server内置的Sp_w ...

  10. 分布式系统理论进阶 - Raft、Zab

    引言 <分布式系统理论进阶 - Paxos>介绍了一致性协议Paxos,今天我们来学习另外两个常见的一致性协议——Raft和Zab.通过与Paxos对比,了解Raft和Zab的核心思想.加 ...