[TOC]
# Angular1.2.18內置過濾器
~~~js
register('currency', currencyFilter);
register('date', dateFilter);
register('filter', filterFilter);
register('json', jsonFilter);
register('limitTo', limitToFilter);
register('lowercase', lowercaseFilter);
register('number', numberFilter);
register('orderBy', orderByFilter);
register('uppercase', uppercaseFilter);
~~~
## Angular過濾器基本語法
* 過濾器可以應用在視圖模板中的表達式中
~~~html
{{ 表達式 | 過濾器名 }}
{{ 表達式 | 過濾器1 | 過濾器2 | ... }}
{{ 表達式 | 過濾器:參數1:參數2:... }}
~~~
* 過濾器可以應用在angular指令中
~~~html
<ul>
<li ng-repeat="item in data | 過濾器名"></li>
</ul>
<ul>
<li ng-repeat="item in data 過濾器1 | 過濾器2 | ..."></li>
</ul>
<ul>
<li ng-repeat="item in data 過濾器:參數1:參數2:... "></li>
</ul>
~~~
## angular內置過濾器使用的兩步思想
* 過濾對象類型
* 過濾器本身有沒有參數
## currency過濾器
* currency為貨幣過濾器，帶一個參數為貨幣表示法【參數為字符串】,默認帶$表示
* 過濾器對象必須是number類型
#### index.js
~~~html
angular.module('myapp').controller('c1', ['$scope', function ($scope) {
$scope.amount = 1234.56;
}]);
~~~
#### index.html
~~~html
<!DOCTYPE html>
<!--html加載angular模塊myapp-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載angular類庫JS文件-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載angular模塊JS文件-->
<script src="js/app.js"></script>
<!--加載angular控制器JS文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--HTML加載控制器c1-->
<div ng-controller="c1">
<!--美金表示-->
<h1>{{amount |currency}}</h1>
<!--人民幣表示,帶一個參數即可-->
<h1>{{amount |currency:'￥:'}}</h1>
</div>
</body>
</html>
~~~
## date過濾器
* date為日期格式過濾器，帶一個參數為日期表示法【日期表示法參考API】
* date過濾器接收過濾對象為Date、Number、String三種類型,其中String還必須是 ISO 8601表示法,所以最好使用Date、Number類型作為過濾對象
#### index.js
~~~js
angular.module('myapp').controller('c1', ['$scope', function ($scope) {
//日期類型
$scope.mydate1 = new Date();
//日期毫秒數【number類型】
$scope.mydate2 = new Date().getTime();
//iso 8601 時間格式為yyyy-mm-dd，這里不再描述
}]);
~~~
#### index.html
~~~html
<!DOCTYPE html>
<!--html加載angular模塊myapp-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載angular類庫JS文件-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載angular模塊JS文件-->
<script src="js/app.js"></script>
<!--加載angular控制器JS文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--HTML加載控制器c1-->
<div ng-controller="c1">
<h1>{{mydate1 |date:'yyyy-MM-dd'}}</h1>
<h1>{{mydate2 |date:'yyyy年MM月dd日 HH:mm:ss'}}</h1>
</div>
</body>
</html>
~~~
## filter過濾器【給出了搜索思想和匹配思想兩個參數】
* 從一個數組里面過濾出數據，然后組合成一個新的數組
* filter過濾器可以帶兩個參數
* 第一個參數為全文搜索的內容，類型可以是String、Object、Fn
* Fn:function(item){}
* 如果參數是Fn則代表自定義過濾，其中Fn的參數為數組的每一個元素
* 第二個參數為全文搜索的配置,類型可以是boolean、Fn
* Fn:function(actual,expected){}
* 如果參數是Fn則代表自定義匹配方案，兩個參數actual【實際的】和expected【預期的】
* filter過濾器過濾對象為array類型
#### index.js
~~~js
angular.module('myapp').controller('c1', ['$scope', function ($scope) {
//數組數據
$scope.stus = [
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'yyy',
sex: '女',
age: 28,
score: 98
},
{
name: 'bbb',
sex: '男',
age: 26,
score: 78
},
{
name: 'aaa',
sex: '女',
age: 19,
score: 55
},
{
name: 'hzj100',
sex: '男',
age: 24,
score: 56
},
];
//filter的第一個參數如果是Fn代表自定義搜索
//該方法的參數為數組里面的一個元素
//只要返回為true將會給出結果
$scope.mySearch = function (item) {
return item.age > 10 && item.age < 20;
};
//filter的第二個參數如果是Fn代表自定義匹配方案
//actual實際的
//expected預期的
$scope.myComparator = function (actual, expected) {
//根據filter:{age:18}那么
//實際的actual將會是實際的數據
//預期的expected參數將會是18
//那么result代表著上下相差10歲也可以
var result = actual + 10 === expected || actual - 10 === expected || actual === expected;
return result;
};
}]);
~~~
#### index.html
~~~html
<!DOCTYPE html>
<!--html加載angular模塊myapp-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載angular類庫JS文件-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載angular模塊JS文件-->
<script src="js/app.js"></script>
<!--加載angular控制器JS文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--HTML加載控制器c1-->
<div ng-controller="c1">
<h1>全文搜索男</h1>
<ul>
<!--全文搜索男-->
<li ng-repeat="item in stus | filter:'男'">
{{item.name}} - {{item.sex}} - {{item.age}} - {{item.score}}
</li>
</ul>
<h1>全文搜索100</h1>
<ul>
<!--全文搜索100-->
<!--輸入的不是字符串自動轉換為字符串-->
<li ng-repeat="item in stus | filter:100">
{{item.name}} - {{item.sex}} - {{item.age}} - {{item.score}}
</li>
</ul>
<h1>第一參數為對象全文搜索</h1>
<ul>
<!--第一參數為對象-->
<li ng-repeat="item in stus | filter:{name:'hzj',score:100}">
{{item.name}} - {{item.sex}} - {{item.age}} - {{item.score}}
</li>
</ul>
<h1>第一參數為方法全文搜索</h1>
<ul>
<!--第一參數為方法-->
<!--方法在控制器中定義-->
<li ng-repeat="item in stus | filter:mySearch">
{{item.name}} - {{item.sex}} - {{item.age}} - {{item.score}}
</li>
</ul>
<h1>帶兩個參數的filter,第二參為boolean代表是否完全匹配</h1>
<ul>
<!--第一參數為字符串-->
<!--第二參給出boolean代表是否完全匹配,true完全匹配，false匹配部分-->
<li ng-repeat="item in stus | filter:'hzj':false">
{{item.name}} - {{item.sex}} - {{item.age}} - {{item.score}}
</li>
</ul>
<h1>帶兩個參數的filter,第二參為Fn代表自定義匹配方案</h1>
<ul>
<!--第一參數為字符串-->
<!--第二參給出Fn利用實際值和預期值做比較自定義匹配方案-->
<!--該方案為，按照年齡過濾，并且年齡在+10歲或者-10歲都行，那么就是18、8、28都會查出來-->
<li ng-repeat="item in stus | filter:{age:18}:myComparator">
{{item.name}} - {{item.sex}} - {{item.age}} - {{item.score}}
</li>
</ul>
</div>
</body>
</html>
~~~
## json過濾器
* 主要用于調試，并且配合pre標簽查看,因為pre標簽保留格式
* 過濾對象為Object
#### index.js
~~~js
angular.module('myapp').controller('c1', ['$scope', function ($scope) {
//數組數據
$scope.stus = [
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'yyy',
sex: '女',
age: 28,
score: 98
},
{
name: 'bbb',
sex: '男',
age: 26,
score: 78
},
{
name: 'aaa',
sex: '女',
age: 19,
score: 55
},
{
name: 'hzj100',
sex: '男',
age: 24,
score: 56
},
];
}]);
~~~
#### index.html
~~~html
<!DOCTYPE html>
<!--html加載angular模塊myapp-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載angular類庫JS文件-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載angular模塊JS文件-->
<script src="js/app.js"></script>
<!--加載angular控制器JS文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--HTML加載控制器c1-->
<div ng-controller="c1">
<!--使用pre標簽，看的清楚些-->
<!--該json過濾器主要用于調試-->
<!--返回的json顯示模式屬性全部自動添加雙引號-->
<pre>{{name |json}}</pre>
</div>
</body>
</html>
~~~
## limitTo過濾器
* 返回多少個字符或者返回數組里面多少個元素
* limitTo有一個參數，可以是Number、String【字符串自動轉換成number】
* 過濾對象可以是Array、String
#### index.js
~~~
angular.module('myapp').controller('c1', ['$scope', function ($scope) {
//字符串數據
$scope.name='hzj';
//數組數據
$scope.stus = [
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'yyy',
sex: '女',
age: 28,
score: 98
},
{
name: 'bbb',
sex: '男',
age: 26,
score: 78
},
{
name: 'aaa',
sex: '女',
age: 19,
score: 55
},
{
name: 'hzj100',
sex: '男',
age: 24,
score: 56
},
];
}]);
~~~
#### index.html
~~~
<!DOCTYPE html>
<!--html加載angular模塊myapp-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載angular類庫JS文件-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載angular模塊JS文件-->
<script src="js/app.js"></script>
<!--加載angular控制器JS文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--HTML加載控制器c1-->
<div ng-controller="c1">
<!--返回1個字符-->
<h1>{{name | limitTo:1}}</h1>
<!--返回最后一個字符-->
<h1>{{name | limitTo:-1}}</h1>
<!--返回數組前兩個元素-->
<h1>{{stus | limitTo:2}}</h1>
</div>
</body>
</html>
~~~
## lowercase過濾器
* 轉換字符串為小寫
* 過濾對象為String
#### index.js
~~~
angular.module('myapp').controller('c1', ['$scope', function ($scope) {
//字符串數據
$scope.name='HZJ';
}]);
~~~
#### index.html
~~~
<!DOCTYPE html>
<!--html加載angular模塊myapp-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載angular類庫JS文件-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載angular模塊JS文件-->
<script src="js/app.js"></script>
<!--加載angular控制器JS文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--HTML加載控制器c1-->
<div ng-controller="c1">
<!--返回小寫字符-->
<h1>{{name | lowercase}}</h1>
</div>
</body>
</html>
~~~
## number過濾器
* 數字格式化
* 擁有一個參數表示格式化的長度，參數類型為Number、String
* 過濾對象是Number
#### index.js
~~~
angular.module('myapp').controller('c1', ['$scope', function ($scope) {
//數字數據
$scope.num=1234.56789;
}]);
~~~
#### index.html
~~~
<!DOCTYPE html>
<!--html加載angular模塊myapp-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載angular類庫JS文件-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載angular模塊JS文件-->
<script src="js/app.js"></script>
<!--加載angular控制器JS文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--HTML加載控制器c1-->
<div ng-controller="c1">
<!--四舍五入取整-->
<h1>{{num | number:0}}</h1>
<!--四舍五入保留兩位小數-->
<h1>{{num | number:2}}</h1>
</div>
</body>
</html>
~~~
## orderBy過濾器
* 排序過濾器
* 有兩個參數
* 排序依據，其類型為Fn、String、Array
* Fn 沒有什么作用,返回待排序數據而已
* String 排序依據的屬性,可以使用+號或者-號代表升降序
* Array 先按照數組第一個元素排序，如果第一個元素相同，再按照第二個元素排序，以此類推
* 排序升降，其類型為Boolean
* true 降序
* false 升序
* 過濾對象為Array
#### index.js
~~~
angular.module('myapp').controller('c1', ['$scope', function ($scope) {
//數組數據
$scope.stus = [
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'yyy',
sex: '女',
age: 28,
score: 98
},
{
name: 'bbb',
sex: '男',
age: 26,
score: 78
},
{
name: 'aaa',
sex: '女',
age: 19,
score: 55
},
{
name: 'hzj100',
sex: '男',
age: 24,
score: 56
},
{
name: 'hzj100',
sex: '男',
age: 28,
score: 56
},
];
}]);
~~~
#### index.html
~~~
<!DOCTYPE html>
<!--html加載angular模塊myapp-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載angular類庫JS文件-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載angular模塊JS文件-->
<script src="js/app.js"></script>
<!--加載angular控制器JS文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--HTML加載控制器c1-->
<div ng-controller="c1">
<!--按照學生年齡排序-->
<ul>
<li ng-repeat="item in stus | orderBy:'age':false">
{{item.age}}
</li>
</ul>
<!--按照學生年齡排序-->
<!--如果年齡相同，那么再按照分數排序-->
<!--使用了數組作為參數-->
<ul>
<li ng-repeat="item in stus | orderBy:['age','-score']:false">
{{item.age}}-{{item.score}}
</li>
</ul>
</div>
</body>
</html>
~~~
## uppercase過濾器
* 轉換字符串為大寫
* 過濾對象為String
#### index.js
~~~
angular.module('myapp').controller('c1', ['$scope', function ($scope) {
//字符串數據
$scope.name='hzj';
}]);
~~~
#### index.html
~~~
<!DOCTYPE html>
<!--html加載angular模塊myapp-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載angular類庫JS文件-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載angular模塊JS文件-->
<script src="js/app.js"></script>
<!--加載angular控制器JS文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--HTML加載控制器c1-->
<div ng-controller="c1">
<!--返回小寫字符-->
<h1>{{name | uppercase}}</h1>
</div>
</body>
</html>
~~~
- Angular簡介
- angular1資料網站
- Angular初級部分
- 打破傳統的前端
- Angular基本組成部分
- Angular環境搭建
- Angular項目測試
- Angular基礎概念
- Angular模塊
- Angular控制器
- Angular指令
- Angular表達式
- Angular視圖
- Angular基礎實戰
- Angular模塊創建和使用
- Angular控制器和模型創建
- scope對象
- 控制器中調度window對象和document對象
- Angular表達式調度過濾器
- Angular中的ng模塊全局方法
- Angular模板應用
- 使用指令復制元素
- 使用指令隱藏顯示元素
- Angular指令ng-if
- ng-src和ng-href
- Angular處理樣式
- Angular作用域事件傳遞
- 表單中的元素
- Angular初學者常見的坑
- 再論雙向綁定
- Angular中級部分
- Angular路由機制
- ui-router管理狀態
- ui-router狀態嵌套和視圖嵌套
- ui-router多個命名的視圖
- ui-router路由控制
- 自定義指令
- 自定義過濾器
- Angular項目目錄結構
- Angular服務
- Angular高級部分
- Angular依賴注入
- README