第219天：Angular---过滤器-白红宇

在Angular中，过滤器的功能主要是格式化数据表达式，且可以自定义过滤器。作用域(scope)主要服务于页面模板，在控制器和页面中起桥梁作用，保存模板中的数据对象，为模板中的元素提供方法和属性。

一、过滤器的表现形式

在angular中有三种变现形式，通过管道字符 “ | ”，与需要处理的代码进行连接，看代码：

1、单个过滤器，如：{

{
表达式 | 过滤器名}}

货币过滤器 {

{8.88 | currency}} // $8.88

2、多个过滤器，如：{

{表达式 | 过滤器名1 | 过滤器名2 | ...}}

{

{8.88 | currency | filter | ...}}

3、带参数过滤器,如：{

{表达式 | 过滤器名1 : 参数1 : 参数2 : ...}}

{

{8.88 | number : 1}}

二、angular中自带的九种过滤器

1、currency格式化数字为货币格式。

1  {
     {  8.88 | currency  }}//  默认为$8.882 3  {
    {  8.88 | currency  ： "￥"}} // ￥8.88

2、lowercase过滤器将字符串格式化为小写

1 姓名为{
    { lastName | lowercase }} // zhang    $scope.lastName="ZHANG"

3、uppercase过滤器将字符串格式化为大写

{
    { lastName | uppercase }} // ZHANG    $scope.lastName="zhang"

4、orderBy过滤器根据表达式排列数组

1 // 根据id降序排序 2  3 {
    {[{"age":20,"id":10,"name":"iphone"}, 4  5 {"age":12,"id":11,"name":"sunm xing"}, 6  7 {"age":44,"id":12,"name":"test abc"}] 8  9 |   orderBy:'id':true}}10 11 // 根据id升序排序12 13 {
    {[{"age":20,"id":10,"name":"iphone"},14 15 {"age":12,"id":11,"name":"sunm xing"},16 17 {"age":44,"id":12,"name":"test abc"}]18 19 |   orderBy:'id'}}

5、filter查找

1 // 查找name为iphone的行2 3 {
    {[{"age":20,"id":10,"name":"iphone"},4 5 {"age":12,"id":11,"name":"sunm xing"},6 7 {"age":44,"id":12,"name":"test abc"}]8 9 |filter:{'name':'iphone'}}}//输出的话就是{"age":20,"id":10,"name":"iphone"}

6、limitTo 截取

1 {
    {"1234567890"|limitTo:6}}// 从前面开始截取6位2 3 {
    {"1234567890"|limitTo:-4}}// 从后面开始截取4位

7、date 时间格式化

1 {
    {1490161945000 | date:"yyyy-MM-dd HH:mm:ss" }}// 2017-03-22 13:52:25

8、number 格式化（保留小数）

1 {
    {149016.1945000|number:2}}   //149016.19

9、 json (格式化json对象)

json过滤器可以把一个js对象格式化为json字符串，没有参数。这东西有什么用呢，我一般也不会在页面上输出一个json串啊，官网说它可以用来进行调试，嗯，是个不错的选择。或者，也可以用在js中使用，作用就和我们熟悉的JSON.stringify()一样。用法超级简单：

1 {
     { jsonTest | json}}

三、angular自定义过滤器

方法：

1 app.filter('name', function() {2 3         return function(input, char) {4 5              return  自定义你的过滤器6 7       }8 9 }

1 app.filter('capitalize', function() { 2  3       //input 需要过滤的元素 4  5       //char位置，索引减一 6  7        return function(input, char) { 8  9        　　if(isNaN(input)) {10 11                   //如果序号位置没有设置，索引位置默认是012 13                    var char = char - 1 || 0;14 15                    //把过滤元素索引位置上的字母转换成大写16 17                    var letter = input.charAt(char).toUpperCase();18 19                    var out = [];20 21                    for(var i = 0; i < input.length; i++) {22 23                       if(i == char) {24 25                            out.push(letter);26 27                       } else {28 29                               out.push(input[i]);30 31                         }32 33                    }34 35                         return out.join('');36 37                       } else {38 39                            return input;40 41                         }42 43                   }44 45 });