詳解AngularJS驗證、過濾器、指令
一、驗證
angularJS中提供了許多的驗證指令，可以輕松的實現(xiàn)驗證，只需要在表單元素上添加相應的ng屬性，常見的如下所示：
<input Type="text" ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""][ng-pattern=""][ng-change=""] [ng-trim=""]>
表單與表單元素都需要通過name引用，請注意設置name的值。獲得錯誤的詳細參數(shù)可以在示例中看到。
示例代碼：
<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
<head>
<meta charset="UTF-8">
<title>驗證</title>
</head>
<body>
<!--指定控制器的作用范圍-->
<form ng-controller="Controller1" name="form1">
<p>
<label for="username">帳號：</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位小寫字母</span>
</p>
<p>
密碼的值：{{"["+password+"]"}}<br/>
是否合法：form1.password.$valid={{form1.password.$valid}}<br/>
是否非法：form1.password.$invalid={{form1.password.$invalid}}<br/>
錯誤消息：form1.password.$error={{form1.password.$error}}<br/>
是否修改：form1.password.$dirty={{form1.password.$dirty}}<br/>
是否默認：form1.password.$pristine={{form1.password.$pristine}}<br/>
</p>
<p>
表單信息：<br/>
錯誤消息：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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope) {
});
</script>
</body>
</html>
運行結(jié)果：
二、過濾器
使用過濾器格式化數(shù)據(jù)，變換數(shù)據(jù)格式，在模板中使用一個插值變量。語法格式如下：
{{ express | filter:parameter1:p2:p3… | … | …}}
過濾器分了內(nèi)置過濾器與自定義過濾器，過濾器的調(diào)用方式也分了在模板中調(diào)用與在函數(shù)中調(diào)用。
2.1、內(nèi)置過濾器
常見的內(nèi)置過濾器有：
1)、currency(貨幣)
{{123.456 | currency:'￥'}}
2)、number(數(shù)字)
{{12.235| number:2}}
3)、uppercase , lowercase(大小寫)格式化
{{"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': 小時, 范圍為(00-23)
'H': 小時 (0-23)
'hh': am/pm形式的小時, 范圍為(01-12)
'h': am/pm形式的小時, (1-12)
'mm': 分鐘,范圍為 (00-59)
'm': 分鐘 (0-59)
'ss': 秒, 范圍為 (00-59)
's': 秒 (0-59)
'.sss' or ',sss': 毫秒,范圍為 (000-999)
'a': am/pm 標記
'Z': 4 位數(shù)字的時區(qū)偏移(+符號)(-1200-+1200)
'ww': ISO-8601 年內(nèi)的周數(shù) (00-53)
'w': ISO-8601 年內(nèi)的周數(shù) (0-53)
format 字符串也可以是以下預定義的本地化格式之一:
'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 'in the morning'")。如果要輸出單引號，使序列中使用兩個單引號(如： "h 'o''clock'")。
7)、orderBy(排序)格式化
orderBy:'age':reverse
reverse是true表示降序、false表示升序
8)、filter(篩選&過濾)格式化
{{name | filter : 'l' | json}}
2.1.1、在模板中使用過濾器
示例代碼：
<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
<head>
<meta charset="UTF-8">
<title>過濾器</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>
大寫：{{message|uppercase}}
</p>
<p>
小寫：{{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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
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>
運行結(jié)果：
2.1.2、在腳本中調(diào)用過濾函數(shù)
在函數(shù)中調(diào)用過濾器的方法是：在控制中添加對的依賴，filter的依賴，filter("過濾函數(shù)名稱")(被過濾對象,'參數(shù)')
示例代碼：
<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
<head>
<meta charset="UTF-8">
<title>過濾器</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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope,$filter) {
$scope.money=1985.897;
//使用$filter服務查找currency函數(shù)，并調(diào)用
$scope.moneyString=$filter("currency")($scope.money,'USD$');
});
</script>
</body>
</html>
運行結(jié)果：
2.2、自定義過濾器
示例代碼：
<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
<head>
<meta charset="UTF-8">
<title>過濾器</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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//向模塊中添加過濾
//用于裁剪字符，超過長度則截取，添加...
app01.filter("cutString",function(){
return function(srcString,length,addString){
if(srcString.length<length){
return srcString;
}
return srcString.substring(0,length)+addString;
}
});
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope,$filter) {
$scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)");
});
</script>
</body>
</html>
運行結(jié)果：
練習1：
點擊價格與名稱可以進行排序，排序時顯示向上或向下的箭頭，在搜索框中可以輸入查詢條件過濾數(shù)據(jù)。驗證搜索框中的內(nèi)容只能是字母與數(shù)字，不允許輸入其它類型的字符。
練習2：
請自定義一個過濾器實現(xiàn)敏感關鍵字過濾，在過濾器中可以準備一個敏感詞數(shù)組，將敏感詞替換成指定的符號，默認為*號。
{{"This is some bad,dark evil text" | censor:"bad,dark,evil":"happy"}}
顯示結(jié)果：
This is some happy,happy happy text
三、指令（directive）
指令(directive)是AngularJS模板標記和用于支持的JavaScript代碼的組合。AngularJS指令標記可以是HTML屬性、元素名稱或者CSS類，指令擴展了HTML的行為。指令可以分為：
a)、內(nèi)置指令：支持AngularJS功能的指令、擴展表單元素的指令、把作用域綁定到頁面元素的指令
b)、自定義指令，增加與擴展出新的指令。
ng-app這樣的標記我們稱之為指令。模板通過指令指示AngularJS進行必要的操作。 比如：ng-app指令用來通知AngularJS自動引導應用；ez-clock 指令用來通知AngularJS生成指定的時鐘組件。
3.1、支持AngularJS功能的指令
3.1.1、應用與模塊（ng-app）
自動載入啟動一個AngularJS應用，聲明了ng-app的元素會成為$rootScope的起點
每個HTML文檔只有一個AngularJS應用能被自動載入啟動,文檔中找到的第一個ngApp將被用于定義自動載入啟動的應用的根元素。要在一個HTML文檔中運行多個應用，你必須使用angular.bootstrap來手工啟動。AngularJS應用間不能嵌套。
3.1.2、控制器（ng-Controller）
ngController指令給視圖添加一個控制器，控制器之間可以嵌套，內(nèi)層控制器可以使用外層控制器的對象，但反過來不行。這是angular支持基于“視圖-模型-控制器”設計模式原則的主要方面。
Angular中的MVC組件有：
模型 — 模型是一個域的屬性集合；域被附加到DOM上，通過綁定來存取域?qū)傩浴?
視圖 — 模板(進行數(shù)據(jù)綁定的HTML)會被呈現(xiàn)到視圖中。
控制器 — ngController指令聲明一個控制器類；該類包含了業(yè)務邏輯，在應用后臺使用函數(shù)和值來操控域中的屬性。
注意，你也能使用$route服務定義一個路由來將控制器附加到DOM上。一個常見錯誤是在模板上再次使用ng-controller定義一個控制器。這將引起控制器被附加和執(zhí)行兩次。
3.1.3、包含（ng-Include）
獲取、編譯并引用一個外部HTML片段(也可以是內(nèi)部的)
默認情況下，模板URL被強制為使用與應用文檔相同的域名和協(xié)議。這是通過調(diào)用$sce.getTrustedResourceUrl 實現(xiàn)的。為了從其它的域名和協(xié)議載入模板，你可以采用 白名單化 或 包裹化 任一手段來作為可信任值。參考 Angular的 強上下文轉(zhuǎn)義。
此外，瀏覽器的 同源策略 和 交叉源資源共享(CORS) 策略會進一步限制模板是否能成功載入。例如，ngInclude 在所有瀏覽器上不能進行交叉域請求，一些瀏覽不能訪問 file:// 等。
<ng-include src="" [onload=""] [autoscroll=""]></ng-include> <ANY ng-include="" [onload=""] [autoscroll=""]></ANY> <ANY class="ng-include: ; [onload: ;] [autoscroll: ;]"> </ANY>
外部包含：
外部包含是指包含一個獨立的外部文件。
包含時請注意中間頁面地址要加引號，需要的是一個字符，如果不加會認為是一個變量。
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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
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)容前后增加一個*
}
regTest();
</script>
</body>
</html>
運行結(jié)果：
內(nèi)部包含：
先定義模板，指定id與類型，模板中可以是任意片段：
<script id="p1" type="text/ng-template">
引用模板，模板中可以使用angular表達式，引用的方法與外部包含一樣。
<!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">
您想購買的商品是:{{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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
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)容前后增加一個*
}
regTest();
</script>
</body>
</html>
運行結(jié)果：
上面的結(jié)果都是“TF卡”的原因是因為模板是先包含再解析的，后定義的變量覆蓋前面定義的，并不是一邊包含一邊渲染的。
3.1.4、不綁定（ngNonBindable）
ngNonBindable指令告訴Angular編譯或綁定當前DOM元素的內(nèi)容。這對于要求Angular忽略那些元素中包含Angular指令和綁定的情況下很有用。這種情況能讓你的網(wǎng)站實時顯示源碼。
<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>
被解析的表達式：1+2={{1+2}}
</p>
<p ng-non-bindable="true">
不解析的表達式：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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope) {
});
</script>
</body>
</html>
結(jié)果：
3.2、擴展表單元素的指令
3.2.1、ng-options
該指令允許你基于一個迭代表達式添加選項
<select ng-model="color" ng-options="c.name for c in colors"> <option>--請選擇--</option> </select>
ng-model必須要指定，默認情況下被選擇的值就是當前對象，沒有value的項將被清除。
示例代碼：
<!DOCTYPE html>
<!--指定angular管理的范圍-->
<html ng-app="app01">
<head>
<meta charset="UTF-8">
<title>指令</title>
</head>
<body>
<!--指定控制器的作用范圍-->
<form ng-controller="Controller1" name="form1">
<h3>基礎下拉列表：</h3>
<p>
<select ng-model="user1" ng-options="u.name for u in users">
<option value="">--請選擇--</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="">--請選擇--</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="">--請選擇--</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="">--請選擇--</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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
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>
運行結(jié)果：
3.2.2、ng-class-even與ng-class-odd
AngularJS模板使你可以把該作用域內(nèi)的數(shù)據(jù)直接綁定到所顯示的HTML元素
ng-class-even與ng-class類似，ng-repeat中偶數(shù)時應用
ng-class-odd與ng-class類似，ng-repeat中奇數(shù)時應用
<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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
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>
運行結(jié)果：
3.2.3、ng-bind-template
同時綁定多個表達式塊
<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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope) {
});
</script>
</body>
</html>
運行結(jié)果：
dupes錯誤說明：
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不允許重復。
<div ng-repeat="row in [1,1,1]"> <div ng-repeat="row in [1,1,1] track by $index">
ng-repeat還是需要一個唯一的key
3.2.5、ng-switch
根據(jù)作用域表達式動態(tài)切換把那個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'">
請輸入顏色：<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">藍色</span>
<span ng-switch-default>輸入錯誤，請輸入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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope) {});
</script>
</body>
</html>
運行結(jié)果：
3.2.6、ng-value
綁定給定的表達式到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">
//定義模塊，指定依賴項為空
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope) {});
</script>
</body>
</html>
示例結(jié)果：
只允許使用在radio與select上，checkbox無效。
3.3、事件
ng-blur 失去焦點
ng-change 改變
ng-checked 被選擇
ng-click 點擊
ng-copy 復制
ng-cut 剪切
ng-dbclick 雙擊
ng-focus 獲得焦點
ng-keydown 按下鍵
ng-keyup 按鍵彈起
ng-mousedown 鼠標按下
ng-mouseenter 鼠標進入
ng-mouseleave 鼠標離開
ng-mousemove 鼠標移動
ng-mouseup 鼠標按下后彈起
ng-paste 粘貼
ng-submit 提交
ng-swipe-left 左滑動
ng-swipe-right 右滑動
有些特殊的事件需要引入外部模塊支持，如ng-swipe-left，首先添加引用：
<script src="js/angular146/angular-touch.min.js" type="text/javascript" charset="utf-8"></script>
在定義模塊時指定要依賴的模塊：
//定義模塊，指定依賴項為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">
//定義模塊，指定依賴項為ngTouch
var app01 = angular.module("app01", ['ngTouch']);
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope) {});
</script>
</body>
</html>
運行結(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
}
可以查看幫助文檔獲得詳細的信息。
3.5、自定義指令
內(nèi)置的指令就算再豐富也是有限的，對于特殊的需要可以選擇自定義指令，自定義指令可以封裝常用操作也便于分享與交流，自定義指令的語法格式如下：
module.directive('指令名稱'，function(){
return {
template:插入指令元素的模板
restrict:允許指令應用的范圍
replace:告訴編譯器用指令模板取代定義該指令的元素
transclude:是否可以訪問內(nèi)部作用域以外的作用域
scope:指定內(nèi)部作用域
link:鏈接函數(shù)
controller:定義控制器來管理指令作用域和視圖
require:指定所需要的其它指令
};
});
restrict：限制指令行為，允許指令應用的范圍，取值，可以組合，如AE。
@：使用@（@attribute）來進行單向文本（字符串）綁定
= ：使用=（=attribute）進行雙向綁定變量
& ：使用&來調(diào)用父作用域中的函數(shù)
3.5.1、第一個自定義指令
示例代碼：
<!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">
//定義模塊，指定依賴項為ngTouch
var app01 = angular.module("app01", []);
//在模塊app01上定義curentTime指令
app01.directive("myTimer",function(){
return {
template:"<span>"+new Date().toLocaleString()+"</span>", //模板
restrict:"AE", //可應用范圍
replace:true //是否替換
};
});
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope) {
});
</script>
</body>
</html>
運行結(jié)果：
因為使用了replace屬性，所以div標簽被替換了，另外restrict指定為AE則標簽可以作為元素與屬性使用。
3.5.2、自定義時鐘
上個自定義指定很簡單，我將上一個指令修改為可以動態(tài)變化的時間及可以給時鐘指定參數(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">
//定義模塊，指定依賴項為ngTouch
var app01 = angular.module("app01", []);
//定義控制器，指定控制器的名稱，$scope是全局對象
app01.controller("Controller1", function($scope) {
});
//在模塊app01上定義curentTime指令
app01.directive("myTimer",function(){
return {
template:"<span style='color:{{color}}'></span>", //模板
restrict:"AE", //可應用范圍
replace:true, //是否替換
scope:{
color:'@'
},
link:function(scope,elem,attr,controller){
var i=attr.interval||1000;
elem.text(new Date().toLocaleString()+" 已計時："+attr.passed+"秒"); //向元素中設置文本為當前時間
//定時器，每隔指定的時間調(diào)用函數(shù)
setInterval(function(){
attr.passed=parseInt(attr.passed)+parseInt(i/1000);
elem.text(new Date().toLocaleString()+" 已計時："+attr.passed+"秒"); //向元素中設置文本為當前時間
},i);
}
};
});
</script>
</body>
</html>
運行結(jié)果：
四、示例下載
github倉庫：https://github.com/zhangguo5/Angular02.git
以上所述是小編給大家介紹的AngularJS驗證、過濾器、指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
本文主要介紹AngularJs E2E Testing的資料，這里整理了詳細的資料，及簡單代碼示例，有興趣的小伙伴可以參考下2016-09-09
Angular.js前臺傳list數(shù)組由后臺spring MVC接收數(shù)組示例代碼
這篇文章主要給大家介紹了關于Angular.js前臺傳list數(shù)組之后，由后臺spring MVC接收數(shù)組的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-07-07
大家都是在Reactive Extensions for Javascript誕生于幾年前，隨著angular2正式版的發(fā)布，它將會被更多開發(fā)者所認知。這篇文章我們來詳細介紹RxJs提供的Observable對象，有需要的朋友們可以參考借鑒。2016-09-09
詳解AngularJS用Interceptors來統(tǒng)一處理HTTP請求和響應
本篇文章主要介紹了AngularJS用Interceptors來統(tǒng)一處理HTTP請求和響應 ，具有一定的參考價值，有興趣的可以了解一下2017-06-06
angularjs在ng-repeat中使用ng-model遇到的問題
本文給大家分享了一個個人在使用angular過程中遇到的在ng-repeat中使用ng-model的問題，并附上簡單的解決辦法，希望能對大家學習angular有所幫助2016-01-01
Angular.JS內(nèi)置服務$http對數(shù)據(jù)庫的增刪改使用教程
我們可以使用內(nèi)置的$http服務直接同外部進行通信。$http服務只是簡單的封裝了瀏覽器原生的XMLHttpRequest對象，下面這篇文章主要給大家介紹了關于Angular.JS內(nèi)置服務$http對數(shù)據(jù)庫的增刪改等操作的相關資料，需要的朋友可以參考下。2017-05-05
這篇文章主要介紹了Angular路由ui-router配置詳解，非常不錯，具有一定得參考借鑒價值，需要的朋友參考下吧2018-08-08
本篇文章主要介紹了Angular2 父子組件通信方式的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要給大家介紹了關于如何以Angular的姿勢打開Font-Awesome的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Angular具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-04-04
angular6.0開發(fā)教程之如何安裝angular6.0框架
這篇文章主要介紹了angular6.0開發(fā)教程之如何安裝angular6.0框架，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06