发表于: 2017-05-13 23:11:05

1 1077


angular中$filter的使用方法

小课堂【IT修真院郑州分院】

1.背景介绍

1,angularJS中constant是什么?


常量(constant)顾名思义,angularJS中的常量,也可以说是angularJS中的全局数据。 作用:在不同的控制器(controller)中都可以使用。

2,angular中$filter是什么? 
过滤器(filter)人如其名,作用就是接收一个输入,通过某个规则进行处理, 然后返回处理后的结果。主要用在数据的格式化以及修改,ng内置了一些过滤器, 分别为:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、 uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器,可以根据自己的需求自定义数据处里的方法。

2.知识剖析

angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种,分别为:


1,JS原生写法:通过var 直接设置变量。
2,用angularjs value来设置全局变量 。例:
App.value('test',{"test":"test222","test1":"test111"});
3,用angularjs constant来设置全局变量 。
App.constant('constanttest', 'this is constanttest');

Filter的基本原型( '|' 是语法规则):{{ expression | filter }}

Filter可以被链式使用(即连续使用多个filter):{{ expression | filter1 | filter2 | ... }}

Filter也可以指定多个参数:{{ expression | filter:argument1:argument2:... }}

AngularJS内建的Filter

currencyFilter(currency):

用途:格式化货币

方法原型:

function(amount, currencySymbol, fractionSize)

用法:

{{ 12 | currency}} 将12格式化为货币,默认单位符号为 '$', 小数默认2位

{{ 12.45 | currency:'¥'}} 将12.45格式化为货币,使用自定义单位符号为 '¥', 小数默认2位

{{ 12.45 | currency:'CHY¥':1}} 将12.45格式化为货币,使用自定义单位符号为 'CHY¥', 小数指定1位, 会执行四舍五入操作

{{ 12.55 | currency:undefined:0}} 将12.55格式化为货币, 不改变单位符号, 小数部分将四舍五入

dateFilter(date):

方法原型:

function(date, format, timezone)

用法:

使用ISO标准日期格式

{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}

使用13位(单位:毫秒)时间戳

{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}

filterFilter(filter):

用途:过滤数组

方法原型:

function(array, expression, comparator)

用法1(参数expression使用String和参数expression使用object):

                    
 

Name:{{u.name}}

Age:{{u.age}}


   

Name:{{u.name}}

Age:{{u.age}}


   

用法2(参数expression使用function):

                    
 先在Controller中定义function: myFilter
  $scope.myFilter = function (item) {
      return item.age === 20;
  };

Name:{{u.name}}

Age:{{u.age}}


内置的方法还有多种请参考:angular中 $filter详解

3.常见问题

1. 在控制器中如何使用$filter以及如何自定义$filter

4.解决方案

1. 在控制器中使用自定义的 $filter

万维娜师姐的修真院任务

5.编码实战

6.扩展思考

constant和value的区别

每当搜索constant时候,总会连带出现value的说明。 两者都可以作为全局变量使用,但是有两点不同:
1.value不可以在config里注入,但是constant可以。
2.value可以修改,但是constant不可以修改,一般直接用constant配置一些需要经常使用的数据。

    
       Uncaught Error: [$injector:modulerr] Failed to instantiate module mainApp due to:
       Error: [$injector:unpr] Unknown provider: FBid    

7.参考文献

参考一: 无上@诀



返回列表 返回列表
评论

    分享到