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

angular.module("exampleApp") .filter("labelCase", function () { return function (value, reverse) { if (angular.isString(value)) { var intermediate = reverse ? value.toUpperCase() : value.toLowerCase(); return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr()); } else { return value; } } }) .filter("skip", function () { return function(data,count) { if (angular.isArray(data) && angular.isNumber(count)) { if(data.length<count || count<) { return data; }else { return data.slice(count); } } else { return data; } } });

  html改的部分:

<tr ng-repeat="item in products | skip: ">

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

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

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

angular.module("exampleApp") .filter("labelCase", function () { return function (value, reverse) { if (angular.isString(value)) { var intermediate = reverse ? value.toUpperCase() : value.toLowerCase(); return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr()); } else { return value; } } }) .filter("skip", function () { return function (data, count) { if (angular.isArray(data) && angular.isNumber(count)) { if (data.length < count || count < ) { return data; } else { return data.slice(count); } } else { return data; } } }) .filter("take", function ($filter) {//大家可以看到,我在工厂函数引用了AngularJs的内置服务。 return function (data, skipcount, takecount) {//大家看下我这里传了三个参数? var skipdata = $filter('skip')(data, skipcount);//这种写法大家是否迷糊了呢?函数式编程。 return $filter("limitTo")(skipdata, takecount);//limitTo是内置的过滤器。 } });

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

<tr ng-repeat="item in products | take::">

  结果:

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

过滤器就是这样就已经完成了。是不是很简单。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzspzp.html