詳解AngularJS驗(yàn)證、過(guò)濾器、指令

更新時(shí)間：2017年01月04日 09:14:15 作者：張果

這篇文章主要介紹了AngularJS驗(yàn)證、過(guò)濾器、指令的相關(guān)知識(shí),angularJS中提供了許多的驗(yàn)證指令，可以輕松的實(shí)現(xiàn)驗(yàn)證，具體詳情大家通過(guò)本文一起學(xué)習(xí)吧，需要的朋友可以參考下

一、驗(yàn)證

angularJS中提供了許多的驗(yàn)證指令，可以輕松的實(shí)現(xiàn)驗(yàn)證，只需要在表單元素上添加相應(yīng)的ng屬性，常見(jiàn)的如下所示：

<input Type="text" ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""][ng-pattern=""][ng-change=""] [ng-trim=""]>

表單與表單元素都需要通過(guò)name引用，請(qǐng)注意設(shè)置name的值。獲得錯(cuò)誤的詳細(xì)參數(shù)可以在示例中看到。

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>驗(yàn)證</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1">
 <p>
 <label for="username">帳號(hào)：</label>
 <input type="text" id="username" name="username" ng-model="username" ng-required="true" />
 <span ng-show="form1.username.$error.required">必填</span>
 </p>
 <p>
 <label for="username">密碼：</label>
 <input type="text" id="password" name="password" ng-model="password" ng-required="true" ng-pattern="/^[a-z]{6,8}$/" ng-trim="true"/>
 <span ng-show="form1.password.$error.required">必填</span>
 <span ng-show="form1.password.$error.pattern">只允許6-8位小寫(xiě)字母</span>
 </p>
 <p>
 密碼的值：{{"["+password+"]"}}<br/>
 是否合法：form1.password.$valid={{form1.password.$valid}}<br/>
 是否非法：form1.password.$invalid={{form1.password.$invalid}}<br/>
 錯(cuò)誤消息：form1.password.$error={{form1.password.$error}}<br/>
 是否修改：form1.password.$dirty={{form1.password.$dirty}}<br/>
 是否默認(rèn)：form1.password.$pristine={{form1.password.$pristine}}<br/>
 </p>
 <p>
 表單信息：<br/>
 錯(cuò)誤消息：form1.$error={{form1.$error}}<br/>
 是否合法：form1.$valid={{form1.$valid}}<br/>
 是否非法：form1.$invalid={{form1.$invalid}}<br/>
 </p>
 <p>
 <button ng-disabled="form1.$invalid">提交</button>
 </p>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 });
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

二、過(guò)濾器

使用過(guò)濾器格式化數(shù)據(jù)，變換數(shù)據(jù)格式，在模板中使用一個(gè)插值變量。語(yǔ)法格式如下：

{{ express | filter:parameter1:p2:p3… | … | …}}

過(guò)濾器分了內(nèi)置過(guò)濾器與自定義過(guò)濾器，過(guò)濾器的調(diào)用方式也分了在模板中調(diào)用與在函數(shù)中調(diào)用。

2.1、內(nèi)置過(guò)濾器

常見(jiàn)的內(nèi)置過(guò)濾器有：

1)、currency(貨幣)

{{123.456 | currency:'￥'}}

2)、number(數(shù)字)

{{12.235| number:2}}

3)、uppercase , lowercase(大小寫(xiě))格式化

{{"Hello"| uppercase}}

4)、json(數(shù)據(jù))格式化

{{userObject| json}}

5)、limitTo(截取)格式化，數(shù)量限制

{{"StringObject" | limitTo : 3}}

6)、date 日期格式化

{{name | date : 'yyyy-MM-dd hh:mm:ss'}}

'yyyy': 4位數(shù)字的年份(如AD 1 => 0001, AD 2010 => 2010)
'yy': 2位數(shù)字的年份，范圍為(00-99)。(如AD 2001 => 01, AD 2010 => 10)
'y': 1位數(shù)字的年份，例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12)
'dd': 日，范圍為(01-31)
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat)
'HH': 小時(shí), 范圍為(00-23)
'H': 小時(shí) (0-23)
'hh': am/pm形式的小時(shí), 范圍為(01-12)
'h': am/pm形式的小時(shí), (1-12)
'mm': 分鐘,范圍為 (00-59)
'm': 分鐘 (0-59)
'ss': 秒, 范圍為 (00-59)
's': 秒 (0-59)
'.sss' or ',sss': 毫秒,范圍為 (000-999)
'a': am/pm 標(biāo)記
'Z': 4 位數(shù)字的時(shí)區(qū)偏移(+符號(hào))(-1200-+1200)
'ww': ISO-8601 年內(nèi)的周數(shù) (00-53)
'w': ISO-8601 年內(nèi)的周數(shù) (0-53)

format 字符串也可以是以下預(yù)定義的本地化格式之一:
'medium': 等于en_US本地化后的 'MMM d, y h:mm:ss a' (如：Sep 3, 2010 12:05:08 pm)
'short': 等于en_US本地化后的 'M/d/yy h:mm a' (如： 9/3/10 12:05 pm)
'fullDate': 等于en_US本地化后的 'EEEE, MMMM d, y' (如： Friday, September 3, 2010)
'longDate': 等于en_US本地化后的 'MMMM d, y' (如： September 3, 2010)
'mediumDate': 等于en_US本地化后的 'MMM d, y' (如： Sep 3, 2010)
'shortDate': 等于en_US本地化后的 'M/d/yy' (如： 9/3/10)
'mediumTime': 等于en_US本地化后的 'h:mm:ss a' (如： 12:05:08 pm)
'shortTime': 等于en_US本地化后的 'h:mm a' (如： 12:05 pm)
format 字符串可以包含固定值。這需要用單引號(hào)括起來(lái) (如： "h 'in the morning'")。如果要輸出單引號(hào)，使序列中使用兩個(gè)單引號(hào)(如： "h 'o''clock'")。

7)、orderBy(排序)格式化

orderBy:'age':reverse
reverse是true表示降序、false表示升序

8)、filter(篩選&過(guò)濾)格式化

{{name | filter : 'l' | json}}

2.1.1、在模板中使用過(guò)濾器

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>過(guò)濾器</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1">
 <p>
 貨幣：{{money}} ，{{money|currency}} ，{{money|currency:"￥"}}
 </p>
 <p>
 數(shù)字：{{money|number:1}} ，{{money | number:1 | currency:"$" }}
 </p>
 <p>
 大寫(xiě)：{{message|uppercase}}
 </p>
 <p>
 小寫(xiě)：{{message|lowercase}}
 </p>
 <p>
 json：{{user | json}}
 </p>
 <p>
 截取：{{message|limitTo:5|uppercase}}
 </p>
 <p>
 日期1：{{birthday|date:'yyyy年MM月dd日 HH:mm:ss'}}
 </p>
 <p>
 日期2：{{birthday|date:'fullDate'}}
 </p>
 <p>
 排序：{{users|orderBy:'age':true}}
 </p>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 $scope.money=1985.678;
 $scope.message="Hello AngularJS!"
 $scope.user={name:"rose",age:18};
 $scope.birthday=new Date();
 $scope.users=[{name:"rose",age:18},{name:"jack",age:19},{name:"tome",age:17}];
 });
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

2.1.2、在腳本中調(diào)用過(guò)濾函數(shù)

在函數(shù)中調(diào)用過(guò)濾器的方法是：在控制中添加對(duì)的依賴(lài)，filter的依賴(lài)，filter("過(guò)濾函數(shù)名稱(chēng)")(被過(guò)濾對(duì)象,'參數(shù)')

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>過(guò)濾器</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1">
 {{money}}
 <hr/>
 {{moneyString}}
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope,$filter) {
 $scope.money=1985.897;
 //使用$filter服務(wù)查找currency函數(shù)，并調(diào)用
 $scope.moneyString=$filter("currency")($scope.money,'USD$');
 });
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

2.2、自定義過(guò)濾器

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>過(guò)濾器</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1">
 <p>
 {{"Hello AngularJS and NodeJS" | cutString:15:'...'}}
 </p>
 <p>
 {{longString}}
 </p>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //向模塊中添加過(guò)濾
 //用于裁剪字符，超過(guò)長(zhǎng)度則截取，添加...
 app01.filter("cutString",function(){
 return function(srcString,length,addString){
  if(srcString.length<length){
  return srcString;
  }
  return srcString.substring(0,length)+addString;
 }
 });
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope,$filter) {
 $scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)");
 });
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

練習(xí)1：

點(diǎn)擊價(jià)格與名稱(chēng)可以進(jìn)行排序，排序時(shí)顯示向上或向下的箭頭，在搜索框中可以輸入查詢(xún)條件過(guò)濾數(shù)據(jù)。驗(yàn)證搜索框中的內(nèi)容只能是字母與數(shù)字，不允許輸入其它類(lèi)型的字符。

練習(xí)2：

請(qǐng)自定義一個(gè)過(guò)濾器實(shí)現(xiàn)敏感關(guān)鍵字過(guò)濾，在過(guò)濾器中可以準(zhǔn)備一個(gè)敏感詞數(shù)組，將敏感詞替換成指定的符號(hào)，默認(rèn)為*號(hào)。

{{"This is some bad,dark evil text" | censor:"bad,dark,evil":"happy"}}

顯示結(jié)果：

This is some happy,happy happy text

三、指令（directive）

指令(directive)是AngularJS模板標(biāo)記和用于支持的JavaScript代碼的組合。AngularJS指令標(biāo)記可以是HTML屬性、元素名稱(chēng)或者CSS類(lèi)，指令擴(kuò)展了HTML的行為。指令可以分為：

a)、內(nèi)置指令：支持AngularJS功能的指令、擴(kuò)展表單元素的指令、把作用域綁定到頁(yè)面元素的指令

b)、自定義指令，增加與擴(kuò)展出新的指令。

ng-app這樣的標(biāo)記我們稱(chēng)之為指令。模板通過(guò)指令指示AngularJS進(jìn)行必要的操作。比如：ng-app指令用來(lái)通知AngularJS自動(dòng)引導(dǎo)應(yīng)用；ez-clock 指令用來(lái)通知AngularJS生成指定的時(shí)鐘組件。

3.1、支持AngularJS功能的指令

3.1.1、應(yīng)用與模塊（ng-app）

自動(dòng)載入啟動(dòng)一個(gè)AngularJS應(yīng)用，聲明了ng-app的元素會(huì)成為$rootScope的起點(diǎn)
每個(gè)HTML文檔只有一個(gè)AngularJS應(yīng)用能被自動(dòng)載入啟動(dòng),文檔中找到的第一個(gè)ngApp將被用于定義自動(dòng)載入啟動(dòng)的應(yīng)用的根元素。要在一個(gè)HTML文檔中運(yùn)行多個(gè)應(yīng)用，你必須使用angular.bootstrap來(lái)手工啟動(dòng)。AngularJS應(yīng)用間不能嵌套。

3.1.2、控制器（ng-Controller）

ngController指令給視圖添加一個(gè)控制器，控制器之間可以嵌套，內(nèi)層控制器可以使用外層控制器的對(duì)象，但反過(guò)來(lái)不行。這是angular支持基于“視圖-模型-控制器”設(shè)計(jì)模式原則的主要方面。

Angular中的MVC組件有：

模型 — 模型是一個(gè)域的屬性集合；域被附加到DOM上，通過(guò)綁定來(lái)存取域?qū)傩浴?
視圖 — 模板(進(jìn)行數(shù)據(jù)綁定的HTML)會(huì)被呈現(xiàn)到視圖中。
控制器 — ngController指令聲明一個(gè)控制器類(lèi)；該類(lèi)包含了業(yè)務(wù)邏輯，在應(yīng)用后臺(tái)使用函數(shù)和值來(lái)操控域中的屬性。
注意，你也能使用$route服務(wù)定義一個(gè)路由來(lái)將控制器附加到DOM上。一個(gè)常見(jiàn)錯(cuò)誤是在模板上再次使用ng-controller定義一個(gè)控制器。這將引起控制器被附加和執(zhí)行兩次。

3.1.3、包含（ng-Include）

獲取、編譯并引用一個(gè)外部HTML片段(也可以是內(nèi)部的)

默認(rèn)情況下，模板URL被強(qiáng)制為使用與應(yīng)用文檔相同的域名和協(xié)議。這是通過(guò)調(diào)用$sce.getTrustedResourceUrl 實(shí)現(xiàn)的。為了從其它的域名和協(xié)議載入模板，你可以采用白名單化或包裹化任一手段來(lái)作為可信任值。參考 Angular的強(qiáng)上下文轉(zhuǎn)義。
此外，瀏覽器的同源策略和交叉源資源共享(CORS) 策略會(huì)進(jìn)一步限制模板是否能成功載入。例如，ngInclude 在所有瀏覽器上不能進(jìn)行交叉域請(qǐng)求，一些瀏覽不能訪問(wèn) file:// 等。

<ng-include src="" [onload=""] [autoscroll=""]></ng-include>
<ANY ng-include="" [onload=""] [autoscroll=""]></ANY>
<ANY class="ng-include: ; [onload: ;] [autoscroll: ;]"> </ANY>

外部包含：

外部包含是指包含一個(gè)獨(dú)立的外部文件。

包含時(shí)請(qǐng)注意中間頁(yè)面地址要加引號(hào)，需要的是一個(gè)字符，如果不加會(huì)認(rèn)為是一個(gè)變量。

header.html

<header>
 <h2>歡迎光臨天狗商城</h2>
</header>

footer.html

<style>
 .cls1 {
 background: lightblue;
 height: 100px;
 line-height: 100px;
 text-align: center;
 }
</style>
<footer class="cls1">
 <h3>版本所有 違者必究</h3>
</footer>

d05.html

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
 <ng-include src="header"></ng-include>
 <ng-include src="'header.html'"></ng-include>
 <div ng-include="'footer.html'"></div>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 });
 function regTest()
 {
 var reg1=new RegExp("\d","igm");
 var reg2=/\d/igm;
 var str="This is some bad,dark evil text";
 str=str.replace(/bad|dark|evil/igm,"Happy");
 console.log(str);
 //取出Hello Hello
 var str="<input value='Hello'/><input value='World'/>";
 //將value中的內(nèi)容前后增加一個(gè)*
 }
 regTest();
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

內(nèi)部包含：

先定義模板，指定id與類(lèi)型，模板中可以是任意片段：

<script id="p1" type="text/ng-template">

引用模板，模板中可以使用angular表達(dá)式，引用的方法與外部包含一樣。

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
 <ng-include src="header"></ng-include>
 <ng-include src="'header.html'"></ng-include>
 <script id="template1" type="text/ng-template">
 您想購(gòu)買(mǎi)的商品是:{{product}}
 </script>
 <ng-include src="'template1'" onLoad="product='SD卡'"></ng-include>
 <ng-include src="'template1'" onLoad="product='TF卡'"></ng-include>
 <div ng-include="'footer.html'"></div>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 });
 function regTest()
 {
 var reg1=new RegExp("\d","igm");
 var reg2=/\d/igm;
 var str="This is some bad,dark evil text";
 str=str.replace(/bad|dark|evil/igm,"Happy");
 console.log(str);
 //取出Hello Hello
 var str="<input value='Hello'/><input value='World'/>";
 //將value中的內(nèi)容前后增加一個(gè)*
 }
 regTest();
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

上面的結(jié)果都是“TF卡”的原因是因?yàn)槟０迨窍劝俳馕龅?，后定義的變量覆蓋前面定義的，并不是一邊包含一邊渲染的。

3.1.4、不綁定（ngNonBindable）

ngNonBindable指令告訴Angular編譯或綁定當(dāng)前DOM元素的內(nèi)容。這對(duì)于要求Angular忽略那些元素中包含Angular指令和綁定的情況下很有用。這種情況能讓你的網(wǎng)站實(shí)時(shí)顯示源碼。

<div>Normal: {{1 + 2}}</div><div ng-non-bindable>Ignored: {{1 + 2}}</div>

腳本：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
 <p>
 被解析的表達(dá)式：1+2={{1+2}}
 </p>
 <p ng-non-bindable="true">
 不解析的表達(dá)式：1+2={{1+2}}
 </p>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 });
 </script>
 </body>
</html>

結(jié)果：

3.2、擴(kuò)展表單元素的指令

3.2.1、ng-options

該指令允許你基于一個(gè)迭代表達(dá)式添加選項(xiàng)

<select ng-model="color" ng-options="c.name for c in colors">
<option>--請(qǐng)選擇--</option>
</select>

ng-model必須要指定，默認(rèn)情況下被選擇的值就是當(dāng)前對(duì)象，沒(méi)有value的項(xiàng)將被清除。

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1">
 <h3>基礎(chǔ)下拉列表：</h3>
 <p>
 <select ng-model="user1" ng-options="u.name for u in users">
  <option value="">--請(qǐng)選擇--</option>
 </select>
 <span> {{user1}}</span>
 </p>
 <h3>帶分組的下拉列表：</h3>
 <p>
 <select ng-model="user2" ng-options="u.name group by u.sex for u in users">
  <option value="">--請(qǐng)選擇--</option>
 </select>
 <span> {{user2}}</span>
 </p>
 <h3>組合的下拉列表：</h3>
 <p>
 <select ng-model="user3" ng-options="(u.name+u.age+'歲') group by u.sex for u in users">
  <option value="">--請(qǐng)選擇--</option>
 </select>
 <span> {{user3}}</span>
 </p>
 <h3>自定義ng-model的值：</h3>
 <p>
 <select ng-model="user4" ng-options="u.id as u.name group by u.sex for u in users">
  <option value="">--請(qǐng)選擇--</option>
 </select>
 <span> {{user4}}</span>
 </p>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 $scope.users = [{
  id: 1,
  name: "tom",
  sex: "男",
  age: 19
 }, {
  id: 2,
  name: "rose",
  sex: "女",
  age: 18
 }, {
  id: 7,
  name: "jack",
  sex: "男",
  age: 16
 }, {
  id: 9,
  name: "lucy",
  sex: "女",
  age: 20
 }, {
  id: 15,
  name: "mark",
  sex: "男",
  age: 89
 }];
 });
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

3.2.2、ng-class-even與ng-class-odd

AngularJS模板使你可以把該作用域內(nèi)的數(shù)據(jù)直接綁定到所顯示的HTML元素

ng-class-even與ng-class類(lèi)似，ng-repeat中偶數(shù)時(shí)應(yīng)用

ng-class-odd與ng-class類(lèi)似，ng-repeat中奇數(shù)時(shí)應(yīng)用

<p ng-repeat="a in animals" ng-class-odd="'odd'" ng-class-even="'even'">
 {{a.name}}
</p>

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 <style>
 .bg1{
 background: lightcoral;
 color:white;
 }
 .bg2{
 background: lightpink;
 color: white;
 }
 </style>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1">
 <ul>
 <li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'">
  {{u.name}}
 </li>
 </ul>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 $scope.users = [{
  id: 1,
  name: "tom",
  sex: "男",
  age: 19
 }, {
  id: 2,
  name: "rose",
  sex: "女",
  age: 18
 }, {
  id: 7,
  name: "jack",
  sex: "男",
  age: 16
 }, {
  id: 9,
  name: "lucy",
  sex: "女",
  age: 20
 }, {
  id: 15,
  name: "mark",
  sex: "男",
  age: 89
 }];
 });
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

3.2.3、ng-bind-template

同時(shí)綁定多個(gè)表達(dá)式塊

<p ng-bind-template="{{student1}} and {{student2}}"></p>

示例：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1">
 <div ng-bind="info1">{{info2}}</div>
 <div ng-bind-template="{{info1}} ? 答案是：{{info2}}"></div>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 $scope.info1="1+1=";
 $scope.info2="2";
 });
 </script>
 </body>
</html>

結(jié)果：

3.2.4、ng-init

初始化

<p ng-init="test=1" ng-repeat="a in animals">
 {{a.name}} {{a.id+test}}
</p>

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1">
 <ul ng-init="nums=[1,1,2,2,3,3,4,4,5,5]">
 <li ng-repeat="i in nums track by $index">
  {{i}}+1={{i+1}}
 </li>
 </ul>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 });
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

dupes錯(cuò)誤說(shuō)明：

AngularJS does not allow duplicates in a ng-repeat directive. This means if you are trying to do the following, you will get an error.

ng-repeat不允許重復(fù)。

<div ng-repeat="row in [1,1,1]">
<div ng-repeat="row in [1,1,1] track by $index">

ng-repeat還是需要一個(gè)唯一的key

3.2.5、ng-switch

根據(jù)作用域表達(dá)式動(dòng)態(tài)切換把那個(gè)DOM元素包含在已經(jīng)編譯的模板中。

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
 請(qǐng)輸入顏色：<input ng-model="color" />
 <p ng-switch="color" ng-style="{'color':color}">
 <span ng-switch-when="red">紅色</span>
 <span ng-switch-when="green">綠色</span>
 <span ng-switch-when="blue">藍(lán)色</span>
 <span ng-switch-default>輸入錯(cuò)誤，請(qǐng)輸入red,green,blue</span>
 </p>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {});
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

3.2.6、ng-value

綁定給定的表達(dá)式到input[select]或 input[radio]的值上

<input type="radio" ng-value="'值'" ng-model="radioValue" />{{radioValue}}

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
 <p>
 是否同意：
 <input type="radio" ng-value="'同意'" ng-model="isAllow" name="allow" />yes
 <input type="radio" ng-value="'不同意'" ng-model="isAllow" name="allow" />no
 <p>
  {{isAllow}}
 </p>
 </p>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為空
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {});
 </script>
 </body>
</html>

示例結(jié)果：

只允許使用在radio與select上，checkbox無(wú)效。

3.3、事件

ng-blur 失去焦點(diǎn)
ng-change 改變
ng-checked 被選擇
ng-click 點(diǎn)擊
ng-copy 復(fù)制
ng-cut 剪切
ng-dbclick 雙擊
ng-focus 獲得焦點(diǎn)
ng-keydown 按下鍵
ng-keyup 按鍵彈起
ng-mousedown 鼠標(biāo)按下
ng-mouseenter 鼠標(biāo)進(jìn)入
ng-mouseleave 鼠標(biāo)離開(kāi)
ng-mousemove 鼠標(biāo)移動(dòng)
ng-mouseup 鼠標(biāo)按下后彈起
ng-paste 粘貼
ng-submit 提交
ng-swipe-left 左滑動(dòng)
ng-swipe-right 右滑動(dòng)

有些特殊的事件需要引入外部模塊支持，如ng-swipe-left，首先添加引用：

<script src="js/angular146/angular-touch.min.js" type="text/javascript" charset="utf-8"></script>

在定義模塊時(shí)指定要依賴(lài)的模塊：

 //定義模塊，指定依賴(lài)項(xiàng)為ngTouch
 var app01 = angular.module("app01", ['ngTouch']);

其它的步驟與使用普通事件一樣了。

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 <style type="text/css">
 .circle{
 width: 100px;
 height: 100px;
 background: lightgreen;
 border-radius: 50px;
 position: absolute;
 }
 </style>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
 <h3 ng-init="left=200">left:{{left}}</h3>
 <div ng-swipe-left="left=left-10" ng-swipe-right="left=left+10" class="circle" ng-style="{'left':left+'px'}"></div>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/angular146/angular-touch.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為ngTouch
 var app01 = angular.module("app01", ['ngTouch']);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {});
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

3.4、其它內(nèi)置指令

angular中提供了很多的內(nèi)置指令，還有如：

ng-
{
app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view
}

可以查看幫助文檔獲得詳細(xì)的信息。

3.5、自定義指令

內(nèi)置的指令就算再豐富也是有限的，對(duì)于特殊的需要可以選擇自定義指令，自定義指令可以封裝常用操作也便于分享與交流，自定義指令的語(yǔ)法格式如下：

module.directive('指令名稱(chēng)'，function(){
 return {
 template:插入指令元素的模板
 restrict:允許指令應(yīng)用的范圍
 replace:告訴編譯器用指令模板取代定義該指令的元素
 transclude:是否可以訪問(wèn)內(nèi)部作用域以外的作用域
 scope:指定內(nèi)部作用域
 link:鏈接函數(shù)
 controller:定義控制器來(lái)管理指令作用域和視圖
 require:指定所需要的其它指令
 };
});

restrict：限制指令行為，允許指令應(yīng)用的范圍，取值，可以組合，如AE。

@：使用@（@attribute）來(lái)進(jìn)行單向文本（字符串）綁定
= ：使用=（=attribute）進(jìn)行雙向綁定變量
& ：使用&來(lái)調(diào)用父作用域中的函數(shù)

3.5.1、第一個(gè)自定義指令

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1">
 <div my-Timer></div>
 <br/>
 <my-Timer></my-Timer>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為ngTouch
 var app01 = angular.module("app01", []);
 //在模塊app01上定義curentTime指令
 app01.directive("myTimer",function(){
 return {
  template:"<span>"+new Date().toLocaleString()+"</span>", //模板
  restrict:"AE", //可應(yīng)用范圍
  replace:true //是否替換
 };
 });
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 });
 </script>
 </body>
</html>

運(yùn)行結(jié)果：

因?yàn)槭褂昧藃eplace屬性，所以div標(biāo)簽被替換了，另外restrict指定為AE則標(biāo)簽可以作為元素與屬性使用。

3.5.2、自定義時(shí)鐘

上個(gè)自定義指定很簡(jiǎn)單，我將上一個(gè)指令修改為可以動(dòng)態(tài)變化的時(shí)間及可以給時(shí)鐘指定參數(shù)與事件。

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
 <head>
 <meta charset="UTF-8">
 <title>指令</title>
 </head>
 <body>
 <!--指定控制器的作用范圍-->
 <form ng-controller="Controller1">
 <my-Timer color="blue" passed="0" interval="1000"></my-Timer>
 </form>
 <!--引入angularjs框架-->
 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //定義模塊，指定依賴(lài)項(xiàng)為ngTouch
 var app01 = angular.module("app01", []);
 //定義控制器，指定控制器的名稱(chēng)，$scope是全局對(duì)象
 app01.controller("Controller1", function($scope) {
 });
 //在模塊app01上定義curentTime指令
 app01.directive("myTimer",function(){
 return {
  template:"<span style='color:{{color}}'></span>", //模板
  restrict:"AE", //可應(yīng)用范圍
  replace:true, //是否替換
  scope:{
  color:'@'
  },
  link:function(scope,elem,attr,controller){
  var i=attr.interval||1000;
  elem.text(new Date().toLocaleString()+" 已計(jì)時(shí)："+attr.passed+"秒"); //向元素中設(shè)置文本為當(dāng)前時(shí)間
  //定時(shí)器，每隔指定的時(shí)間調(diào)用函數(shù)
  setInterval(function(){
  attr.passed=parseInt(attr.passed)+parseInt(i/1000);
  elem.text(new Date().toLocaleString()+" 已計(jì)時(shí)："+attr.passed+"秒"); //向元素中設(shè)置文本為當(dāng)前時(shí)間
  },i);
  }
 };
 });
 </script>
 </body>
</html>

運(yùn)行結(jié)果：