Duan_Super
Duan_Super

Angular内置指令

指令允许你更改HTML标签的具体操作。这是一项非常强大的功能，它允许你创建自定义标签。使用指令标签会告知编译器在DOM元素中添加某些功能，甚至能够对其进行改动。AngularJS中还提供大量预置指令，你可以根据实际需要进行选择。

指令使我们用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变它。
AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”。

指令遵循驼峰式命名，如ngBind。指令可以通过使用指定符号转化成链式风格的的名称来调用，特定符号包括 : ,-,_。你好可以选择给指令加上前缀，比如“x-”，“data-”来让它符合html的验证规则。这里有以下可以用的指令名称例子：ng:bind, ng-bind, ng_bind, x-ng-bind , data-ng-bind。

指令可以做为元素名，属性名，类名，或者注释。


1. Application指令


(1) ng-app 

任何标记ng-app的DOM元素会创建$rootScope.$rootScope是作用域链的起点,任何嵌套在里面的指令都会继承它.在JS里面通过run方法来访问$rootScope.
ng-app这个指令比较特殊，一个html文档最好只出现一次，如果出现多次也是只有第一个起作用，并且可以出现在html文档的任何一个元素上。
ng-app作用是告诉子元素一下的指令是归angularJs的，angularJs会识别的。
ng-app的值可以为空，当然在练习的时候，在项目中则一定是要赋值的。也就是后面所说的模块。angularJs的使用，不是有一句一定要牢记在的话“一切都是由模块开始的”。
例如：
[html]  view plain  copy
  1. <html ng-app="AngularStudy">  
scope是angularJS中的作用域(其实就是存储数据的地方)，很类似javascript的原型链 。搜索的时候，优先找自己的scope，如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。

$rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说，$rootScope是由angularJS的核心模块ng创建的。

scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。
[html]  view plain  copy
  1. <body ng-app="AngularStudy">  
  2.     <div ng-controller='AngularController1'>  
  3.         <span>{{title}}span>  
  4.         <br />  
  5.         <span>{{item}}span>  
  6.     div>  
  7.     <div ng-controller='AngularController2'>  
  8.         <span>{{title}}span>  
  9.         <br />  
  10.         <span>{{item}}span>  
  11.     div>  
  12.   
  13.     <script type="text/javascript">  
  14.         var angularModule = angular.module("AngularStudy", []);     
  15.         angularModule.controller('AngularController1', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  16.             // 局部的变量，只有在AngularController1中才会显示  
  17.             $scope.title = 'angular controller 1';  
  18.            
  19.             // 全局的变量，都可以调用  
  20.             $rootScope.item = 'angular';  
  21.         }]);  
  22.   
  23.         angularModule.controller('AngularController2', function ($scope, $timeout) {  
  24.             // 局部的变量，只有在AngularController2中才会显示  
  25.             $scope.title = 'angular controller 2';  
  26.         });  
  27.     script>  
  28. body>  
看一下页面上的展示：
Angular内置指令_第1张图片
在网上看到一些文章说到$injector与$rootscope也会有关联，具体的关联后面的会学习到，当前这一块就先了解到这里吧。

(2) ng-controller

该指令会为嵌套在里面的指令创建一个子作用域,避免所有的操作与模型都在$rootScope上.不同的controller他们scope对象是不一样的,即使都是用了同名称的变量，可以看出controller之间是封闭的，可是有时候我们面对两个模块之间进行数据交互，必然在两个controller之间进行通信，这就涉及到angular中的service操作，或者是使用$rootscope,后面学习服务。

请看上面的例子。


2.布尔属性指令


ng-disabled: 用于select button input textarea ,禁止输入
[html]  view plain  copy
  1. <input value="angular" ng-disabled="true"/>  

ng-readonly : 只读
[html]  view plain  copy
  1. <input value="angular" ng-readonly="true"/>  

ng-checked : 单选,多选的选中状态,ng-checked控制radio和checkbox的选中状态
[html]  view plain  copy
  1. <input type="radio" value="angular" ng-checked="true"/>  

ng-selected : 下拉列表的选中
[html]  view plain  copy
  1. <select>  
  2.     <option value="volvo">Volvooption>  
  3.     <option value="saab" ng-selected="true">Saaboption>  
  4.     <option value="opel">Opeloption>  
  5.     <option value="audi">Audioption>  
  6. select>  

ng-multiple控制多选



3.binding指令


(1) ng-bind \ ng-model \ {{}}

AngularJS的数据绑定有三种分别为{{}}、ng-bind和ng-model
{{}}和ng-bind都是单向绑定，由作用于$scope到view层，且在HTML控件(HTML控件有：input、select、button和textarea)中不可显示。
ng-model是双向绑定，$scope<--->view层。

看一个例子：
[html]  view plain  copy
  1. <div ng-controller='AngularController'>  
  2.     <input type="text" name="" ng-model='title'/>  
  3.     <br />  
  4.     <span>$.title的value: {{title}}span>  
  5.     <br />  
  6.     <input type="text" name="" ng-bind='title'/>  
  7.     <br />  
  8.     <span ng-bind='title'>$.title的value:span>  
  9. div>  
  10.   
  11. <script type="text/javascript">  
  12.     var angularModule = angular.module("AngularStudy", []);     
  13.     angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  14.         $scope.title = 'rod chen';  
  15.   
  16.   
  17.         $scope.reset = function() {  
  18.             $scope.title = 'rod chen'  
  19.         }  
  20.     }]);  
  21. script>  

然后对应页面上的结果是：

Angular内置指令_第2张图片

第二个红色框表示ng-bind应用有input标签上不可显示，没有作用。
第一个和第三个分别是{}，以及ng-bind在span上的展示，可以看到{{}}可以保持原有值得情况下添加响应的内容，但是ng-bind确实会将原来的内容全部替换成新的内容。

(2) ng-init

初始化应用时创建一个变量,ng-init 指令添加一些不必要的逻辑到 scope 中，建议你可以在控制器中 ng-controller 指令执行它 。

[html]  view plain  copy
  1. <element ng-init="expression" >element>  
  2. <input ng-init='title = 1; rodchen="234"' type="text" name="" ng-model='title'/>  

4. style相关指令


(1) ng-class

angular 三种处理class

a. scope变量绑定。（不推荐使用，class应该放在html中，不应该占用controller $scope）

[html]  view plain  copy
  1. <body ng-app="AngularStudy">  
  2.     <div ng-controller='AngularController'>  
  3.        <div class="{{className}}">test ng-classdiv>  
  4.     div>  
  5.   
  6.   
  7.     <script type="text/javascript">  
  8.         var angularModule = angular.module("AngularStudy", []);     
  9.         angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  10.             $scope.className = 'angular-class';  
  11.         }]);  
  12.     script>  
  13. body>  
注意此时代码中使用的class不是ng-class。

b. 字符串数组形式

[html]  view plain  copy
  1. <div ng-class="{true:'angular-red-class', false:'angular-yellow-class'}[showRed]">test ng-classdiv>  
这种用法就是说showRed为true时，就给元素加上red这个class，如果variable为false就加上yellow这个class，这个在逻辑比较简单的时候还是蛮好用.

下面的例子可以通过option的选择来选择不同的class
[html]  view plain  copy
  1. <body ng-app="AngularStudy">  
  2.     <div ng-controller='AngularController'>  
  3.         <select ng-model='showRed'>  
  4.             <option value='true'>redoption>  
  5.             <option value='false'>yellowoption>  
  6.         select>  
  7.        <div ng-class="{true:'angular-red-class', false:'angular-yellow-class'}[showRed]">test ng-classdiv>  
  8.     div>  
  9.   
  10.   
  11.     <script type="text/javascript">  
  12.         var angularModule = angular.module("AngularStudy", []);     
  13.         angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  14.             $scope.showRed = 'true';  
  15.         }]);  
  16.     script>  
  17. body>  
上面的这种是对于需要通过true/false的值来进行同一种样式的选择，如果是对于不同的样式一次进行多个赋样式的话我们可以这样
test ng-class
注意这里的class是带有单引号的，与上面的有所不同。

c. 对象key/value处理

[html]  view plain  copy
  1. <body ng-app="AngularStudy">  
  2.     <div ng-controller='AngularController'>  
  3.        <div ng-class="{'angular-red-class': showRed, 'angular-font-class': fontSizeUpdate}">test ng-classdiv>  
  4.     div>  
  5.     <script type="text/javascript">  
  6.         var angularModule = angular.module("AngularStudy", []);     
  7.         angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  8.             $scope.showRed = true;  
  9.             $scope.fontSizeUpdate = true;  
  10.         }]);  
  11.     script>  
  12. body>  
当showRed为true时，增加color样式；当fontSizeUpdate为true时，增加font样式。这种方式与第二种相比的好处在于，可以在ng-class中一次性操作过多个class文件，并且决定是否添加给当前元素。

(2) ng-style

ng-style用来绑定元素的css样式，其表达式的返回值为一个js对象，键为css样式名，值为该样式对应的合法取值。用法比较简单：
[html]  view plain  copy
  1. <div ng-style="{color:'red'}">test ng-classdiv>  
切记red中的单引号不能丢了


(3) ng-show / ng-hide

对于比较常用的元素显隐控制，ng也做了封装，ng-show和ng-hide的值为boolean类型的表达式，当值为true时，对应的show或hide生效。框架会用display:block和display:none来控制元素的显隐。
[html]  view plain  copy
  1. <div ng-show='false' ng-hide='false'>test ng-classdiv>  
这个例子是不是有点矛盾，最后这个div会show出来，因为样式后面会覆盖前面的样式。

5. 表单指令

常用的表单验证指令 

(1) 必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：
[html]  view plain  copy
  1. <input type="text" required />    

(2) 最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：
[html]  view plain  copy
  1. <input type="text" ng-minlength="5" />   

(3) 最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：
[html]  view plain  copy
  1. <input type="text" ng-maxlength="20" />  

(4) 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：
[html]  view plain  copy
  1. <input type="text" ng-pattern="/[a-zA-Z]/" />   

电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：
[html]  view plain  copy
  1. <input type="email" name="email" ng-model="user.email" />   

数字

验证输入内容是否是数字，将input的类型设置为number：
[html]  view plain  copy
  1. <input type="number" name="age" ng-model="user.age" />   

URL

验证输入内容是否是URL，将input的类型设置为 url：
[html]  view plain  copy
  1. <input type="url" name="homepage" ng-model="user.facebook_url" />  

ng form 表单验证示例 （针对以上的几种验证）

[html]  view plain  copy
  1. >  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Angulartitle>  
  6.     <style>  
  7.         .ng-select {  
  8.             color: red;  
  9.         }  
  10.   
  11.         .ng-invalid {  
  12.             border-color: red;  
  13.         }  
  14.     style>  
  15.     <script type="text/javascript" src="./angular/jquery-1.8.2.min.js">script>  
  16.     <script type="text/javascript" src="./angular/angular.js">script>  
  17. head>  
  18. <body ng-app="AngularStudy">  
  19.     <div ng-controller='AngularController'>  
  20.          <div class="col-md-6">  
  21.             <form role="form" name="myForm" ng-submit="submit(myForm)" class="form-horizontal">  
  22.                 <div class="form-group  has-feedback">  
  23.                     <div class="col-md-4">  
  24.                         <label for="name">1.必填项label>  
  25.                     div>  
  26.                     <div class="col-md-8">  
  27.                         <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />  
  28.                         <span class="glyphicon glyphicon-ok form-control-feedback"  
  29.                               ng-show="myForm.name.$dirty && myForm.name.$valid">okspan>  
  30.                     div>  
  31.                 div>  
  32.                 <div class="form-group  has-feedback">  
  33.                     <div class="col-md-4">  
  34.                         <label for="minlength">2.最小长度=5label>  
  35.                     div>  
  36.                     <div class="col-md-8">  
  37.                         <input type="text" id="minlength" name="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />  
  38.                         <span class="glyphicon glyphicon-ok form-control-feedback"  
  39.                               ng-show="myForm.minlength.$dirty && myForm.minlength.$valid">span>  
  40.                     div>  
  41.                 div>  
  42.                 <div class="form-group  has-feedback">  
  43.                     <div class="col-md-4">  
  44.                         <label for="maxlength">3.最大长度=20label>  
  45.                     div>  
  46.                     <div class="col-md-8">  
  47.                         <input type="text" id="maxlength" name="maxlength" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />  
  48.                         <span class="glyphicon glyphicon-ok form-control-feedback"  
  49.                               ng-show="myForm.maxlength.$dirty && myForm.maxlength.$valid">span>  
  50.                     div>  
  51.                 div>  
  52.                 <div class="form-group  has-feedback">  
  53.                     <div class="col-md-4">  
  54.                         <label for="pattern">4. 模式匹配label>  
  55.                     div>  
  56.                     <div class="col-md-8">  
  57.                         <input type="text" id="pattern" name="pattern" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />  
  58.                         <span class="glyphicon glyphicon-ok form-control-feedback"  
  59.                               ng-show="myForm.pattern.$dirty && myForm.pattern.$valid">span>  
  60.                     div>  
  61.                 div>  
  62.                 <div class="form-group  has-feedback">  
  63.                     <div class="col-md-4">  
  64.                         <label for="email">5. 电子邮件label>  
  65.                     div>  
  66.                     <div class="col-md-8">  
  67.                         <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />  
  68.                         <span class="glyphicon glyphicon-ok form-control-feedback"  
  69.                               ng-show="myForm.email.$dirty && myForm.email.$valid">span>  
  70.                     div>  
  71.                 div>  
  72.                 <div class="form-group  has-feedback">  
  73.                     <div class="col-md-4">  
  74.                         <label for="age">6. 数字label>  
  75.                     div>  
  76.                     <div class="col-md-8">  
  77.                         <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />  
  78.   
  79.   
  80.                         <span class="glyphicon glyphicon-ok form-control-feedback"  
  81.                               ng-show="myForm.age.$dirty && myForm.age.$valid">span>  
  82.                     div>  
  83.                 div>  
  84.                 <div class="form-group  has-feedback">  
  85.                     <div class="col-md-4">  
  86.                         <label for="url"> 7. URLlabel>  
  87.                     div>  
  88.                     <div class="col-md-8">  
  89.                         <input type="url" id="url" name="url" ng-model="user.url" class="form-control" />  
  90.                         <span class="glyphicon glyphicon-ok form-control-feedback"  
  91.                               ng-show="myForm.url.$dirty && myForm.url.$valid">span>  
  92.                     div>  
  93.                 div>  
  94.                 <div class="form-group  text-center">  
  95.                     <input class="btn btn-primary btn-lg"  type="submit" value="提交" />  
  96.                 div>  
  97.             form>         
  98.         div>  
  99.         <div class="col-md-12">  
  100.             1.必填项:{{user.name}}    
  101.             <span ng-class="{true:'ng-select'}[myForm.name.$pristine]">$pristine 【没修改】：{{myForm.name.$pristine }}  span>  
  102.             <span ng-class="{true:'ng-select'}[myForm.name.$dirty]">$dirty【修改过】：{{myForm.name.$dirty}}  span>  
  103.             <span ng-class="{true:'ng-select'}[myForm.name.$invalid]">$invalid【验证失败】：{{myForm.name.$invalid}}  span>  
  104.             <span ng-class="{true:'ng-select'}[myForm.name.$valid]">$invalid【验证成功】：{{myForm.name.$valid}}  span>  
  105.             <span ng-class="{true:'ng-select'}[myForm.name.$error.required]">required：{{myForm.name.$error.required}}  span>  
  106.             <br>  
  107.             <br>  
  108.             2.最小长度=5:{{user.minlength}}  
  109.             <span ng-class="{true:'ng-select'}[myForm.minlength.$pristine]">$pristine 【没修改】：{{myForm.minlength.$pristine }}  span>  
  110.             <span ng-class="{true:'ng-select'}[myForm.minlength.$dirty]">$dirty【修改过】：{{myForm.minlength.$dirty}}  span>  
  111.             <span ng-class="{true:'ng-select'}[myForm.minlength.$invalid]">$invalid【验证失败】：{{myForm.minlength.$invalid}}  span>  
  112.             <span ng-class="{true:'ng-select'}[myForm.minlength.$valid]">$invalid【验证成功】：{{myForm.minlength.$valid}}  span>  
  113.             <span ng-class="{true:'ng-select'}[myForm.minlength.$error]">$error【错误详情】：{{myForm.minlength.$error}}  span>  
  114.             <br>   
  115.         div>  
  116.   
  117.   
  118.     <script type="text/javascript">  
  119.         var angularModule = angular.module("AngularStudy", []);     
  120.         angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  121.             $scope.user = {  
  122.                 name :'rodchen',  
  123.                 minlength: '12345',  
  124.                 maxlength: '12345678912345678912',  
  125.                 pattern: 'asdfasdf4',  
  126.                 email: '[email protected]',  
  127.                 age: 25,  
  128.                 url: 'http://www.baidu.com'  
  129.             }  
  130.   
  131.   
  132.             $scope.submit = function(form) {  
  133.                 console.log(form);  
  134.             }  
  135.         }]);  
  136.     script>  
  137. body>  
  138. html>  

接下来我们会在这个示例中去观察一些点（对于上面的验证）：



首先看一下页面上展示的红色框内，这里对应的代码为：

[html]  view plain  copy
  1. <div class="col-md-12">  
  2.     1.必填项:{{user.name}}    
  3.     <span ng-class="{true:'ng-select'}[myForm.name.$pristine]">$pristine 【没修改】：{{myForm.name.$pristine }}  span>  
  4.     <span ng-class="{true:'ng-select'}[myForm.name.$dirty]">$dirty【修改过】：{{myForm.name.$dirty}}  span>  
  5.     <span ng-class="{true:'ng-select'}[myForm.name.$invalid]">$invalid【验证失败】：{{myForm.name.$invalid}}  span>  
  6.     <span ng-class="{true:'ng-select'}[myForm.name.$valid]">$invalid【验证成功】：{{myForm.name.$valid}}  span>  
  7.     <span ng-class="{true:'ng-select'}[myForm.name.$error.required]">required：{{myForm.name.$error.required}}  span>  
  8.     <br>  
  9.     <br>  
  10.     2.最小长度=5:{{user.minlength}}  
  11.     <span ng-class="{true:'ng-select'}[myForm.minlength.$pristine]">$pristine 【没修改】：{{myForm.minlength.$pristine }}  span>  
  12.     <span ng-class="{true:'ng-select'}[myForm.minlength.$dirty]">$dirty【修改过】：{{myForm.minlength.$dirty}}  span>  
  13.     <span ng-class="{true:'ng-select'}[myForm.minlength.$invalid]">$invalid【验证失败】：{{myForm.minlength.$invalid}}  span>  
  14.     <span ng-class="{true:'ng-select'}[myForm.minlength.$valid]">$invalid【验证成功】：{{myForm.minlength.$valid}}  span>  
  15.     <span ng-class="{true:'ng-select'}[myForm.minlength.$error]">$error【错误详情】：{{myForm.minlength.$error}}  span>  
  16.     <br>   
  17. div>  

a. 提到这里就不得不提一些form属性：
formName.inputFieldName.$pristine ：布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过
formName.inputFieldName.$dirty    ：布尔型属性，当且仅当用户实际已经修改的表单。不管表单是否通过验证
formName.inputFieldName.$valid  ：布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true
formName.inputFieldName.$invalid  ：布尔型属性，未通过验证的表单
这里的formName指的是form的name属性值，inputFieldName指的是input标签的name属性值。例如myForm.name.$pristine。


b. 这里的这些验证情况当然通过ng-submit提交表单的时候传入表单的name，然后在处理方法中查看验证信息,如下图


c. 对于表单验证初始都是没有值的，然后我们把当前例子中的初始值去掉，然后看一下页面的显示：


我们可以看到必填项已经显示红框了。这样其实是不对的，因为用户还没有输入，你的验证就不应该开始，所以我们需要修改一代码，
我们把ng-invalid换一个名称ng-error，然后修改一下input的代码。
[html]  view plain  copy
  1. <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' ng-class="{true:'ng-error'}[myForm.name.$dirty && myForm.name.$invalid]"/>  
这个时候我们的验证就会在用户输入之后才开始，关键点就是：myForm.name.$dirty && myForm.name.$invalid。


d. 在（3）中我们提到了ng-invalid class，这个class的名称不是我们自定义的，是ng自己定义的名称。
[css]  view plain  copy
  1. .ng-valid         {  }  
  2. .ng-invalid     {  }  
  3. .ng-pristine     {  }  
  4. .ng-dirty         {  }  
  5. .ng-invalid-required         {  }  
  6. .ng-invalid-minlength         {  }  
  7. .ng-valid-max-length         {  }  
它们对应着表单输入字段的特定状态。
例如当某个字段中的输入非法时，.ng-invlid类会被添加到这个字段上。 你可以编辑自己喜欢的CSS . 你可以私有定制化这些类来实现特定的场景应用.

e. 还有就是其实浏览器对于表单的验证有着自己的默认行为，例如下图


Angular内置指令_第3张图片


我们想要去除这些默认的表单行为，我们需要在form标签中加上novalidate属性。
[html]  view plain  copy
  1. <form role="form" name="myForm" ng-submit="submit(myForm)" class="form-horizontal" novalidate>  

(5) ng-true-value / ng-false-value

当我们点击checkbox 选中复选框时，ng-model 的绑定默认值是true，取消选中时为false.如果我们需要获取的值为字符串或者数字呢？
那么就需要用到 ng-true-value 和ng-false-value.
[html]  view plain  copy
  1. <input ng-model="checkboxModel" name='checkBox' type="checkbox" ng-true-value=" 'hello wolrd' " > //注意 ng-true-value 中的值 如果需要显示字符串的话必须使用单引号.  

然后我们看一下具体的这个input标签内部的信息：


请看红色框内的信息，一个是$viewValue（$viewValue属性保存着更新视图所需的实际字符串），另一个是$modelValue（$modelValue由数据模型持有。$modelValue和$viewValue可能是不同的，取决于$parser流水线是否对其进行了操作。），我们可以在modelValue中查看到hello world，具体这两个属性的值等到我们学习到自定义指令的时候再去看，我们现在知道在哪里可以取值的就好了。

(6) ng-option

ng-options不需要option，会自动生成,ng-options 一定要和ng-model 搭配

a. 先看一个简单的方式（label for value in array）

[html]  view plain  copy
  1. <body ng-app="AngularStudy">  
  2.     <div ng-controller='AngularController'>  
  3.          <div class="col-md-6">        
  4.               <p>usage:label for value in arrayp>  
  5.               <p>选项，{{optData.Selected}}p>  
  6.               <select ng-change="selectAction()" ng-model="optData.Selected" ng-options="o for o in optData.Data">  
  7.                 <option value="">-- 请选择 --option>  
  8.               select>  
  9.         div>  
  10.         
  11.     <script type="text/javascript">  
  12.         var angularModule = angular.module("AngularStudy", []);     
  13.         angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  14.             $scope.optData= {  
  15.                 Data: ['rod', 'road', 'deed'],  
  16.                 Selected: ''  
  17.             };  
  18.   
  19.             $scope.selectAction = function(item) {  
  20.                 console.log($scope.optData.Selected);  
  21.             };  
  22.     script>  
  23. body>  

b. 自定义下拉显示名称(label for value in array) label可以根据需要拼接出不同的字符串

[html]  view plain  copy
  1. <body ng-app="AngularStudy">  
  2.     <div ng-controller='AngularController'>  
  3.          <div class="col-md-6">        
  4.               <p>usage:label for value in arrayp>  
  5.               <p>选项，{{optData.Selected}}p>  
  6.               <select ng-change="selectAction()" ng-model="optData.Selected" ng-options="o.id + '-' + o.MainCategory for o in optData.Data">  
  7.                 <option value="">-- 请选择 --option>  
  8.               select>  
  9.         div>  
  10.         
  11.     <script type="text/javascript">  
  12.         var angularModule = angular.module("AngularStudy", []);     
  13.         angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  14.             $scope.optData= {  
  15.                 Data: [{  
  16.                     id: 10001,  
  17.                     MainCategory: 'man',  
  18.                     ProductName: 'sleeve',  
  19.                     ProductColor: 'white'  
  20.                 },{  
  21.                     id: 10002,  
  22.                     MainCategory: 'women',  
  23.                     ProductName: 'cotta',  
  24.                     ProductColor: 'yellow'  
  25.                 },{  
  26.                     id: 10003,  
  27.                     MainCategory: 'women',  
  28.                     ProductName: 'cotta',  
  29.                     ProductColor: 'blue'  
  30.                 }],  
  31.                 Selected: ''  
  32.             };  
  33.   
  34.   
  35.             $scope.selectAction = function(item) {  
  36.                 console.log($scope.optData.Selected);  
  37.             };  
  38.         }]);  
  39.     script>  
  40. body>  

主要的改变是：
[html]  view plain  copy
  1. <select ng-change="selectAction()" ng-model="optData.Selected" ng-options="o.id + '-' + o.MainCategory for o in optData.Data">   
o.id + '-' + o.MainCategory 可以加上括号或者不加都行。

c. ng-options 选项分组 group by分组项

[html]  view plain  copy
  1. <select ng-change="selectAction()" ng-model="optData.Selected" ng-options="o.id + '-' + o.MainCategory group by o.MainCategory for o in optData.Data">  
在b的基础上加上group by ~.


d. ng-options 自定义ngModel的绑定

下面selected的值为optData的id，这里show的是ProductName，选择的是id
[html]  view plain  copy
  1. <body ng-app="AngularStudy">  
  2.     <div ng-controller='AngularController'>  
  3.          <div class="col-md-6">        
  4.               <p>usage:label for value in arrayp>  
  5.               <p>选项，{{optData.Selected}}p>  
  6.               <select ng-change="selectAction(optData.Selected)" ng-model="optData.Selected" ng-options="o.id as o.ProductName for o in optData.Data">  
  7.                 <option value="">-- 请选择 --option>  
  8.               select>  
  9.         div>  
  10.         
  11.     <script type="text/javascript">  
  12.         var angularModule = angular.module("AngularStudy", []);     
  13.         angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  14.             $scope.optData= {  
  15.                 Data: [{  
  16.                     id: 10001,  
  17.                     MainCategory: 'man',  
  18.                     ProductName: 'sleeve',  
  19.                     ProductColor: 'white'  
  20.                 },{  
  21.                     id: 10002,  
  22.                     MainCategory: 'women',  
  23.                     ProductName: 'cotta',  
  24.                     ProductColor: 'yellow'  
  25.                 },{  
  26.                     id: 10003,  
  27.                     MainCategory: 'women',  
  28.                     ProductName: 'cotta',  
  29.                     ProductColor: 'blue'  
  30.                 }],  
  31.                 Selected: ''  
  32.             };  
  33.   
  34.             $scope.selectAction = function(item) {  
  35.                 console.log(item);  
  36.             };  
  37.         }]);  
  38.     script>  
  39. body>  

可以看到show出来的值与选择获取到的值是不一样的:




e. 二级菜单 

[html]  view plain  copy
  1. <body ng-app="AngularStudy">  
  2.     <div ng-controller='AngularController'>  
  3.         <select ng-model="selectedPerson" ng-options="obj.name for obj in people">      
  4.         select>  
  5.         <select ng-model="selectedPerson1" ng-options="label for label in people[selectedPerson.id].interest">    
  6.         select>  
  7.     div>  
  8.   
  9.     <script type="text/javascript">  
  10.         var angularModule = angular.module("AngularStudy", []);     
  11.         angularModule.controller('AngularController', ['$scope', '$rootScope', function ($scope, $rootScope) {  
  12.             $scope.people = [  
  13.                     {  
  14.                             id: 0,  
  15.                             name: '张三',  
  16.                             interest: [  
  17.                             '爬山',  
  18.                             '游泳',  
  19.                             '旅游',  
  20.                             '美食'  
  21.                         ]  
  22.                     },  
  23.                     {  
  24.                         id: 1,  
  25.                         name: '李四',  
  26.                         interest: [  
  27.                             '音乐',  
  28.                             '美食',  
  29.                             'Coffee',  
  30.                             '看书'  
  31.                         ]  
  32.                     },  
  33.                     {  
  34.                         id: 2,  
  35.                         name: '王五',  
  36.                         interest: [  
  37.                             '音乐',  
  38.                             '电影',  
  39.                             '中国好声音',  
  40.                             '爸爸去哪了',  
  41.                             '非常静距离'  
  42.                         ]  
  43.                     },  
  44.                     {  
  45.                         id: 3,  
  46.                         name: '小白',  
  47.                         interest: [  
  48.                             '游泳',  
  49.                             '游戏',  
  50.                             '宅家里'  
  51.                         ]  
  52.                     }  
  53.                 ];  
  54.   
  55.   
  56.             $scope.selectAction = function(item) {  
  57.                 console.log(item);  
  58.             };  
  59.         }]);  
  60.     script>  
  61. body>  

(7) ng-selected 指令用于设置