[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