在Angular中，過濾器的功能主要是格式化數(shù)據(jù)表達(dá)式，且可以自定義過濾器。作用域(scope)主要服務(wù)于頁面模板，在控制器和頁面中起橋梁作用，保存模板中的數(shù)據(jù)對象，為模板中的元素提供方法和屬性
過濾器
在Angular中，過濾器主要有三種形式，它們分別是：
(1) 單個過濾器，如：{{表達(dá)式 | 過濾器名}}
{{8.88 | currency}} // $8.88
(2) 多個過濾器，如：{{表達(dá)式 | 過濾器名1 | 過濾器名2 | ...}}
{{8.88 | currency | filter | ...}}
(3) 帶參數(shù)過濾器,如：{{表達(dá)式 | 過濾器名1 : 參數(shù)1 : 參數(shù)2 : ...}}
{{8.88 | number : 1}}
排序方式過濾
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<style>
body {padding: 15px;}
</style>
</head>
<body>
<div ng-controller="stuController">
<table class="table table-bordered table-responsive table-hover">
<tr>
<th>序號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>成績</th>
</tr>
<!-- 在下面的ng-repeat指令后通過管道符'|'添加排序過濾器 -->
<tr ng-repeat="stu in data | orderBy: 'score'">
<td>{{$index+1}}</td>
<td>{{stu.name}}</td>
<td>{{stu.sex}}</td>
<td>{{stu.age}}</td>
<td>{{stu.score}}</td>
</tr>
</table>
</div>
<script src="./angular.min.js"></script>
<script>
var stulist = angular.module('MyApp', []);
stulist.controller('stuController', ['$scope', function($scope){
$scope.bold = 'bold';
$scope.data = [
{name: '張明明', sex: '女', age: 24, score: 95},
{name: '李青思', sex: '女', age: 27, score: 87},
{name: '劉曉華', sex: '男', age: 28, score: 86},
{name: '陳忠忠', sex: '男', age: 23, score: 97}
];
}]);
</script>
</body>
</html>
上面的示例中視圖模板通過ng-repeat指令綁定數(shù)據(jù)，調(diào)用orderBy過濾器對分?jǐn)?shù)列進(jìn)行排序，orderBy排序過濾器后面帶了參數(shù)score，默認(rèn)以score為標(biāo)準(zhǔn)進(jìn)行升序排列，如果要降序排序，在score前面加個-即可
<tr ng-repeat="stu in data | orderBy: '-score'">
我們還可以繼續(xù)在后面加上過濾器，如limitTo,它的作用是限制列表顯示列數(shù)
<tr ng-repeat="stu in data | orderBy: '-score' | limitTo: 3">
<!-- 只顯示3列數(shù)據(jù) -->
匹配方式過濾
匹配方式過濾是將字符參數(shù)與列表中的各個成員屬性值相匹配，如果包含則顯示，匹配時(shí)不區(qū)分大小寫。它有三種形式：
(1) 通過filter過濾器直接匹配包含字符參數(shù)的數(shù)據(jù)
{{數(shù)據(jù) | filter: '匹配字符'}}
<!-- 在data數(shù)據(jù)中找到包含80的記錄 -->
{{data | filter: 80}}
(2) 在字符參數(shù)中使用對象形式匹配指定屬性的數(shù)據(jù)
{{數(shù)據(jù) | filter: 對象}}
{{data | filter: {score: 80}}}
(3) 在字符參數(shù)中使用自定義函數(shù)匹配相應(yīng)數(shù)據(jù)
{{數(shù)據(jù) | filter: 函數(shù)名稱}}
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<style>
body {padding: 15px;}
</style>
</head>
<body>
<div ng-controller="stuController">
<table class="table table-bordered table-responsive table-hover">
<tr>
<th>序號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>成績</th>
</tr>
<!-- 調(diào)用findescore函數(shù)對數(shù)據(jù)進(jìn)行過濾 -->
<tr ng-repeat="stu in data | filter: findscore">
<td>{{$index+1}}</td>
<td>{{stu.name}}</td>
<td>{{stu.sex}}</td>
<td>{{stu.age}}</td>
<td>{{stu.score}}</td>
</tr>
</table>
</div>
<script src="./angular.min.js"></script>
<script>
var stulist = angular.module('MyApp', []);
stulist.controller('stuController', ['$scope', function($scope){
$scope.bold = 'bold';
$scope.data = [
{name: '張明明', sex: '女', age: 24, score: 95},
{name: '李青思', sex: '女', age: 27, score: 87},
{name: '劉曉華', sex: '男', age: 28, score: 86},
{name: '陳忠忠', sex: '男', age: 23, score: 97}
];
// 定義過濾函數(shù)，篩選成績大于85且小于90的數(shù)據(jù)
$scope.findscore = function(e) {
return e.score > 85 && e.score < 90;
}
}]);
</script>
</body>
</html>
自定義過濾器
自定義過濾器需要在頁面模塊中注冊一個過濾器的構(gòu)造方法，該方法將返回一個以輸入值為首個參數(shù)的函數(shù)，在函數(shù)體中實(shí)現(xiàn)過濾器的功能
接上面的例子，我們在模塊stulist上自定義一個過濾器，它的作用是篩選出年齡在22到28之間的，且性別是被指定的數(shù)據(jù)
JS代碼：
/* 實(shí)現(xiàn)自定義過濾器,在模塊上使用filter方法,第1個參數(shù)是過濾器名,第二個是實(shí)現(xiàn)函數(shù)
* 在實(shí)現(xiàn)里直接返回一個函數(shù)
* 過濾器篩選出年齡在22和28之間的,且性別被指定的數(shù)據(jù)
*/
stulist.filter('young', function(){
return function(e, type) {
var _out = [];
var _sex = type ? '男' : '女';
for(var i=0; i< e.length; i++) {
if(e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex) {
_out.push(e[i]);
}
}
return _out;
}
});
html代碼：
<!-- 也可以將young這個過濾器的參數(shù)換成true或false -->
<tr ng-repeat="stu in data | young: 0">
<td>{{$index+1}}</td>
<td>{{stu.name}}</td>
<td>{{stu.sex}}</td>
<td>{{stu.age}}</td>
<td>{{stu.score}}</td>
</tr>
過濾器的應(yīng)用
表頭排序
表頭排序是指在使用列表方式顯示數(shù)據(jù)時(shí)，用戶如果單擊列表某列的表頭元素，那么列表中的全部數(shù)據(jù)將會自動按該列的屬性值自動排序，默認(rèn)為升序排列，再次單擊會變?yōu)榻敌蚺帕?/p>
html：
<table class="table table-bordered table-responsive table-hover">
<tr>
<!-- 在每個表頭中增加ng-click事件 -->
<th>序號</th>
<th ng-click="title='name'; desc=!desc">姓名</th>
<th ng-click="title='sex'; desc=!desc">性別</th>
<th ng-click="title='age'; desc=!desc">年齡</th>
<th ng-click="title='score'; desc=!desc">成績</th>
</tr>
<!-- 為數(shù)據(jù)增加排序過濾器 -->
<tr ng-repeat="stu in data | orderBy: title: desc">
<td>{{$index+1}}</td>
<td>{{stu.name}}</td>
<td>{{stu.sex}}</td>
<td>{{stu.age}}</td>
<td>{{stu.score}}</td>
</tr>
</table>
javascript:
var stulist = angular.module('MyApp', []);
stulist.controller('stuController', ['$scope', function($scope){
$scope.data = [
{name: '張明明', sex: '女', age: 24, score: 95},
{name: '李青思', sex: '女', age: 27, score: 87},
{name: '劉曉華', sex: '男', age: 28, score: 86},
{name: '陳忠忠', sex: '男', age: 23, score: 97}
];
$scope.title = 'name';
$scope.desc = 0;
}]);
字符查找
字符查找是指通過調(diào)用Angular中的filter過濾器，查找與過濾器冒號后字符參數(shù)相匹配的數(shù)據(jù)，如果匹配則顯示，否則不顯示
在上面的例子中，我們首先增加一個用于輸入過濾關(guān)鍵字的input
<!-- 在頁面中增加input，用于輸入過濾關(guān)鍵字 -->
<input type="text" ng-model="key" placeholder="請輸入關(guān)鍵字">
<!-- 在循環(huán)中增加過濾器filter，對用戶輸入進(jìn)行匹配 -->
<tr ng-repeat="stu in data | orderBy: title: desc | filter: {name:key}">
// 在js代碼中初始化key的值
$scope.key = '';
作用域概述
$scope對象實(shí)質(zhì)上是一個作用域?qū)ο螅艽鎯?shù)據(jù)模型，為表達(dá)式提供上下文環(huán)境和監(jiān)聽表達(dá)式的變化且傳播時(shí)間，是視圖與控制器之間的橋梁
作用域特點(diǎn)
它提供了一個
$watch方法來監(jiān)聽數(shù)據(jù)模型的變化，ng-model指令就是通過該方法進(jìn)行數(shù)據(jù)的監(jiān)聽，只要有一端發(fā)生變化，則另一端自動進(jìn)行同步更新它提供了一個
$apply方法，為各種烈性的數(shù)據(jù)模型改變提供支撐，將它們引入到Angular可控制的范圍中。它為表達(dá)式提供了執(zhí)行的環(huán)境，一個表達(dá)式必須在擁有該表達(dá)式屬性的作用域中執(zhí)行才更加合適
下面的示例說明$watch如何工作
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body ng-controller="MyController">
<div>
<input type="text" ng-model="name" placeholder="請輸入姓名">
</div>
<div>
累計(jì)變化次數(shù): {{count}}
</div>
<script src="./angular.min.js"></script>
<script>
var myapp = angular.module('MyApp', []);
myapp.controller('MyController', ['$scope', function($scope){
$scope.name = '';
$scope.count = 0;
// 通過 $watch 方法監(jiān)聽name的變化次數(shù)
$scope.$watch('name', function(){
$scope.count++;
})
}])
</script>
</body>
</html>
作為數(shù)據(jù)模型的作用域
作用域是控制器與視圖的橋梁，也是視圖和指令的橋梁
作用域的層級和事件
作用域綁定頁面元素后，便依據(jù)元素的層次關(guān)系形成了自己的層級關(guān)系，在這些層級關(guān)系中，他們可以通過事件的傳播進(jìn)行數(shù)據(jù)的通信
作用域的層級
作用域擁有自己的層級，且它有一個頂級作用域$rootScope，而下面的子級作用域可以創(chuàng)建多個，子級作用域可以繼承父級作用域中的全部屬性和方法，但同級作用域卻不行。
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body>
<div ng-controller="parentController">
<div ng-controller="childController_a">
{{parent_name}}, 我是第一個子層控制器的內(nèi)容
</div>
<div ng-controller="childController_b">
{{parent_name}}, 我是第二個子層控制器的內(nèi)容
</div>
</div>
<script src="./angular.min.js"></script>
<script>
var myapp = angular.module('MyApp', []);
// 在父級控制器中定義parent_name變量
myapp.controller('parentController', ['$scope', function($scope){
$scope.parent_name = 'Hello';
}]);
// 自動繼承父級作用域中的屬性
myapp.controller('childController_a', ['$scope', function($scope){
// todo...
}]);
// 自動繼承父級作用域中的屬性
myapp.controller('childController_b', ['$scope', function($scope){
// todo...
}]);
</script>
</body>
</html>
作用域事件的傳播
在Angular中，作用域間有非常清晰的層次結(jié)構(gòu)關(guān)系，最頂層的是rootscope作用域，其余的都是在它基礎(chǔ)之上進(jìn)行分支和嵌套的。
那么，我們有兩種方法可以實(shí)現(xiàn)作用域之間的通信：
(1) 服務(wù)(service)
通過在各作用域之間創(chuàng)建一個單例的服務(wù)，由該服務(wù)來處理各個作用域間的數(shù)據(jù)通信
(2) 事件(event)
通過作用域之間的事件也可以進(jìn)行數(shù)據(jù)通信，Angular提供了兩個方法$broadcasted和$emitted
$broadcasted方法將事件從父級作用域傳播至子級作用域，它有兩個參數(shù)，eventname，表示事件名稱，data表示傳播過程中攜帶的數(shù)據(jù)$emitted方法將事件從子級作用域傳播至父級作用域，與上面的方法相同。
除了上面的兩個方法外，還需要調(diào)用$on方法，在作用域中監(jiān)控傳播來的事件并獲取相應(yīng)的數(shù)據(jù)。
$on(eventname, function(event, data) {
// 接收傳播事件的處理代碼
})
