我们先看下options的这条语句

ng-options="value.id as value.label group by value.group for value in myOptions"
接下来谈谈自己的理解，value.id表示的是下拉列表中的存放的值，这个值与select的ng-model绑定，双向绑定到DOM中，但不影响下拉列表显示的值；
value.label表示的是下拉列表显示的值，这个值决定了下拉列表中显示的数据，但不会影响ng-model的值；
value.group表示的下拉列表分组的值，它只决定分组的数据；
value in myOptions，表示从myOptions里面重复取数据，名字为value。
叙述的不太好，但是把表现基本说清楚了。。
下面看个栗子：

例子1：
<!doctype html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="http://cdn.bootcss.com/angular.js/1.6.2/angular.min.js"></script>

</head>

<body>

<div ng-controller="CityController">

    <!--省略value.id时会作为一个对象引入-->

    <select  ng-model="city"

             ng-options="city.name for city in cities">

        <!--初始化-->

        <option value="">Choose City</option>

    </select>

    Best City: {{ city.name }}

</div>

<script type="text/javascript">

    angular.module('myApp',[])

        .controller('CityController',function($scope) {

            $scope.cities = [

                {name: 'Seattle'},

                {name: 'San Francisco'},

                {name: 'Chicago'},

                {name: 'New York'},

                {name: 'Boston'}

            ];

        });

</script>

</body>

</html>


 


例子2：




<!DOCTYPE html>

<html lang="en" ng-app="app">

<head>

    <title>select</title>

    <script src="http://cdn.bootcss.com/angular.js/1.6.2/angular.min.js"></script>

    <script>

        var app = angular.module('app', []);

        app.controller('selectController', function ($scope) {

//            初始化下拉列表的显示值

            $scope.aa = '北京';

            $scope.Cities = [

                { id: 1, name: '北京', group: '中国' },

                { id: 2, name: '上海', group: '中国' },

                { id: 3, name: '广州', group: '中国' }];

        });

    </script>

</head>

<body>

<div ng-controller="selectController">

    <select ng-model="aa" ng-options="city.name as city.name group by city.group for city in Cities">

    </select>

    <h1>欢迎来到{{aa}}</h1>

</div>

</body>

</html>




可以看到，一个用了city.name，一个用了aa(可以看做city)，例子1和例子2分别用了两种不同的初始化方式


以下来自流浪猫の窝


<select
        ng-model="myOption"
        ng-options="value.id as value.label group by value.group for value in myOptions">

    <option>--</option>
</select>

ng-model的值会指向select元素的当前选中项的value值. ng-options指令会用于填充select下拉选项,
它的值还需要深究一下: 我们从右边往左边看会比较容易,首先是: value in myOptions


它表示你要迭代当前作用域下的 myOptions 对象. 迭代时,myOptions对象里的每一项的名字就叫value.


接下来是: group by value.group


它告诉angular.js去创建这个标签:


<optgroup label="value.group">

    ...
</optgroup>

标签的label属性将会被value的group属性值填充.


最后是: value.id as value.label


value.id将会和模型进行绑定,它的值会被存进ng-model属性里去(也就是option的value值,被选中后就是select标签的value). 
如果你没有写value.id as,而是只写了value.label,那么,整个对象会被作为ng-model的值.


value.label就是option元素的选项名.这段代码渲染的结果如下:


<optgroup label="Group 1">

    <option value="0">Item 1</option>

    <option value="1">Item 2</option>
</optgroup>

请再仔细看一下,注意一下options的value属性: 你可能认为它的值应该是数据模型中的id属性值,但事实并非如此(虽然一开始我也这么认为).
事实上,它是一个递增的数字,
这个数字指向的是模型的索引值(这里的模型就是myOptions数组).
不用担心它-当用户选择某一项的时候,正确的id还是会被选中,并且传递到ng-model属性中去.
另外,如果你的ng-options表达式里没有value.id部分,那选中项对应的整个对象会成为ng-model的值.


你可以简单的测试一下:


<select
        ng-change="selectAction()"
        ng-model="myOption"
        ng-options="value.id as value.label group by value.group for value in myOptions">

    <option>--</option>
</select>

当用户选中某一项的时候,ng-change 事件会被触发,你可以把它打印出来:


$scope.selectAction = function() {

console.log($scope.myOption);

};

最后提一下,一般select标签都会有一个初始状态,比如"--请选择--"这样.这一项是没有value值的.可以直接在select元素里加上一个option标签:


<option value="">-- 请选择 --</option>

这样是不影响数据模型的.如果用户没有选择,或者选择了这个 "--请选择--" 项,那ng-model值就是空.很好理解.

ng-options的语法有点反人类.合理的语法设计或许应该是这样的:


foreach value in myOptions use value.label as label use value.id as model group by value.group
												


											
ng-options语法详解的更多相关文章
	

    
						
  1. [持续交付实践] pipeline使用：语法详解
		
    一.引言 jenkins pipeline语法的发展如此之快用日新月异来形容也不为过,而目前国内对jenkins pipeline关注的人还非常少,相关的文章更是稀少,唯一看到w3c有篇相关的估计是直 ...
    
		
    2. 
						
  2. Velocity魔法堂系列二：VTL语法详解
		
    一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本处理能力.而且Velocity被移植到不 ...
    
		
    3. 
						
  3. Hive笔记--sql语法详解及JavaAPI
		
    Hive SQL 语法详解:http://blog.csdn.net/hguisu/article/details/7256833Hive SQL 学习笔记(常用):http://blog.sina. ...
    
		
    4. 
						
  4. Hadoop Hive sql语法详解
		
    Hadoop Hive sql语法详解 Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构 化的数据文件 ...
    
		
    5. 
						
  5. Thymeleaf3语法详解和实战
		
    Thymeleaf3语法详解 Thymeleaf是Spring boot推荐使用的模版引擎,除此之外常见的还有Freemarker和Jsp.Jsp应该是我们最早接触的模版引擎.而Freemarker工 ...
    
		
    6. 
						
  6. Xpath语法详解
		
    1.简介 XPath是一门在XML和HTML文档中查找信息的语言,可以用来在XML和HTML文档中对元素和属性进行遍历 XPath的安装 Chrome插件XPath Helper 点Chrome浏览器 ...
    
		
    7. 
						
  7. mysql用户授权、数据库权限管理、sql语法详解
		
    mysql用户授权.数据库权限管理.sql语法详解 —— NiceCui 某个数据库所有的权限 ALL 后面+ PRIVILEGES SQL 某个数据库 特定的权限SQL mysql 授权语法 SQL ...
    
		
    8. 
						
  8. Java8的Stream语法详解（转载）
		
    1. Stream初体验 我们先来看看Java里面是怎么定义Stream的: A sequence of elements supporting sequential and parallel agg ...
    
		
    9. 
						
  9. Java 8系列之Stream的基本语法详解
		
    本文转至:https://blog.csdn.net/io_field/article/details/54971761 Stream系列: Java 8系列之Stream的基本语法详解 Java 8 ...
    
		
    10. 
						
  10. spring AspectJ切入点语法详解  记录以便查阅
		
    AspectJ切入点语法详解 6.5.1  Spring AOP支持的AspectJ切入点指示符 切入点指示符用来指示切入点表达式目的,,在Spring AOP中目前只有执行方法这一个连接点,Spri ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 解读web服务器与php的工作原理
			
    最近决定重读php手册(好吧,其实之前也没怎么读,尴尬脸),既然是重读,那就从php的安装开始咯,然后被手册中出现的各种新词搞懵逼了,什么cgi.fastcgi.sapi.fpm,苍天啊,这些都是什么 ...
    
			
    2. 
						
  2. 在linux下使用百度ueditor编辑器上传图片
			
    百度ueditor编辑器虽然强大,但是也有不足的地方.如果对ueditor流程不是很熟悉可以说走的弯路比较多,费力不讨好.下面呢,就是要解决ueditor遇到的问题. 用ueditor上传图片遇到的问 ...
    
			
    3. 
						
  3. 期待微软平台即服务技术Service Fabric 开源
			
    微软的Azure Service Fabric的官方博客在3.24日发布了一篇博客 Service Fabric .NET SDK goes open source ,介绍了社区呼声最高的Servic ...
    
			
    4. 
						
  4. Android Weekly Notes Issue #250
			
    Android Weekly Issue #250 March 26th, 2017 Android Weekly Issue #250. 本期内容: 好几篇关于Android O预览版的文章; JU ...
    
			
    5. 
						
  5. Vijos1144小胖守皇宫【树形DP】
			
    皇宫看守 太平王世子事件后,陆小凤成了皇上特聘的御前一品侍卫.皇宫以午门为起点,直到后宫嫔妃们的寝宫,呈一棵树的形状:某些宫殿间可以互相望见.大内保卫森严,三步一岗,五步一哨,每个宫殿都要有人全天候看 ...
    
			
    6. 
						
  6. 【Electron】Electron开发入门
			
    Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种 ...
    
			
    7. 
						
  7. 老李分享：QTP的录制原理以及实现
			
    老李分享:QTP的录制原理以及实现   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088 ...
    
			
    8. 
						
  8. 老李推荐：第6章1节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览 2
			
    事件要到那里去? 每个事件源处理类都维护着一个自己的事件队列, 在Monkey中叫做CommandQueue,里面装的是每个具体的MonkeyEvent事件.当来自网络的字串命令被翻译成对应的Monk ...
    
			
    9. 
						
  9. 性能调优之MYSQL高并发优化下
			
    三.算法的优化 尽量避免使用游标,因为游标的效率较差,如果游标操作的数据超过1万行,那么就应该考虑改写..使用基于游标的方法或临时表方法之前,应先寻找基于集的解决方案来解决问题,基于集的方法通常更有效 ...
    
			
    10. 
						
  10. DC平衡双向控制串行器 转接IC GM8913:LVTTL转FPD-LINK III芯片
			
    1 概述     GM8913型DC平衡双向控制串行器,其主要功能是实现将10或12位并行控制信号和一路时钟信号串行为一路2.8Gbps高速串行数据:同时接收低速通道信号实现模式配对的功能.芯片内部集 ...
    
			
    11.