频道导航

AngularJs学习第八篇过滤器filter创建

2019-01-04 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJs学习第八篇过滤器filter创建，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

demo

这是整个示例demo

1、filter.js文件

　　这里我把引入的服务作为一个常量，这样写的好处是我便于修改。

对于如何使用$http 服务，请参考我的AngularJs（三) Deployed 使用

　　运行的结果：

Use filter

过滤器分为两类：

1、对单个数据的过滤

2、对集合进行操作。

一、对数据进行操作使用比较简单

，如demo上所示，在{{item | currency}} 等，就可以进行格式化。

　　 currency：“f" 就可以是价格过滤成英镑。

　　单个数据的过滤器想过滤的数据格式，在过滤器后使用：在相应的格式字符。

　　 number：表示数据小数位保留位，

二：集合过滤

，从集合中过滤出一定的数量。

在基本demo中我加入这样：

　　filter.js中加入了： $http.get(productsUrl).success(function (data) { $scope.products = data;//直接转成了数组 $scope.limitValue = "";//要是字符串 }); 　

在写函数必须写在 success中，因为采用异步获取json数据。

结果：

limit :就可以调节在页面显示的个数。

Create filter

AngularJs有两种过滤器，首先我们可以创建对单个数据进行格式的过滤器，比如：输出的字符串首字母大写。

先说如何定义个过滤器：过滤器是通过module.filter 创建的，创建的一般格式为：

angular.module("exampleApp")//表示获取一个模块。filter是在模块下创建的。

.filter("labelCase",function () { //接收两个参数，第一个参数表示过滤器的名字，第二个是一个工厂函数

return function (value,reverse) { //返回一个工人函数，对坐相应的过滤处理。第一个参数表示需要进行格式的对象，第二个参数表示配置，按照什么格式。

这个是我另写到一个js文件中的。customFilter.js 不要忘记添加。

　好了现在我来更改下数据：

　　前面讲过如果需要添加配置信息，书写格式是过滤器：option

当然默认的参数也可以不写，就会默认给Null值或者undefined。

结果：

自定义一个对各数据处理的过滤器函数就是这么简单。

2、自定义个集合处理的函数，就像limitTo一样。

　　html改的部分：

　　结果：总共是六条数据，有使用了skip过滤器给过掉2条。

在自定义过滤器时，发现有个过滤器已经定义了，我不想重复定义，怎么办，我们还可以利用一创建的过滤器进行创建。

函数引用了AngularJs的内置服务。 return function (data,skipcount,takecount) {//大家看下我这里传了三个参数？ var skipdata = $filter('skip')(data,skipcount);//这种写法大家是否迷糊了呢？函数式编程。 return $filter("limitTo")(skipdata,takecount);//limitTo是内置的过滤器。 } });

　　 $filter('skip') 调用的是skip过滤器，因为他返回的是一个函数，所以我们能继续传参。

　　结果：