写这个的目的是希望能学会如何在指令里加入自己的过滤器。

1.关于过滤器你需要了解这些

1.过滤器的作用：

是将我们的现有的数据进行处理，比如重排序、转换大小写、计算等等，处理完了再返回一个结果。

2.AngularJS自带的过滤器：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个字段属性重新排序。
uppercase	格式化字符串为大写。

3.使用过滤器：

可在如下三个地方使用过滤器，在页面上使用时，通过一个管道符（|）和过滤器名字，

<body>
<div ng-app="myApp" ng-controller="myCtrl"> <!-- 1.在表达式中使用过滤器 --><h1>{{"xywz" | uppercase}}</h1><!-- 2.在指令中使用过滤器 --><p ng-repeat="r in data |orderBy :'time'">{{r.result}}</p>
</div><script>var app = angular.module('myApp', []);//3.控制器中使用过滤器app.controller('myCtrl', function($scope, $filter) {$scope.data = [{'time':2014,'result':'赚钱了'},{'time':2015,'result':'亏大发了'}] ;console.log($filter("orderBy")($scope.data,"time"));});
</script>
</body>

2.如何写自己的过滤器（关键）

我以一个将字符串折分成数组的过滤器举例。在页面上需要传两参数时，就在过滤器后面以冒号（:）隔开，如下面要传的分割器；在页面要实现传三个及以上的参数时，我们可以通过在过滤器后面继续加冒号（ :）和参数的格式添加。总结就是，第一个参数是管道符号前面的数据，多个参数时，在过滤器名称后面以冒号隔开。

<body>
<div ng-app="myApp" ng-controller="myCtrl"> <p ng-repeat="r in data | toArray">{{r}}</p><p ng-repeat="r in data2 | toArray:';'">{{r}}</p>
</div><script>var app = angular.module('myApp', []);//控制器app.controller('myCtrl', function($scope, $filter) {$scope.data ="abc,mn,大山,绿水";$scope.data2 ="abc;mn;大山;绿水";//需要给定分割器});//将字符串分割成数组app.filter("toArray",function(){return function(data,separator){if(data){if(!separator) {separator = ",";//默认逗号分割}return data.split(separator);}else{return [];//得到的结果类型始终为数组类型              }}});
</script>
</body>

3.过滤器中注入服务

<body>
<div ng-app="myApp">在过滤器中使用服务:<h1>{{255 | myFormat}}</h1>
</div><script>var app = angular.module('myApp', []);//自定义服务app.service('hexafy', function() {this.myFunc = function (x) {return x.toString(16);}});//过滤器app.filter('myFormat',['hexafy', function(hexafy) {return function(x) {return hexafy.myFunc(x);};}]);
</script>
</body>

深究AngularJS——过滤器（filter）相关推荐

angularjs 过滤器filter
在前面介绍angularjs已经很多了,中途由于工作和一切生活琐事,暂停了很久.今天在这里将继续angularjs讲解,这节我们来看看angularjs的过滤去filter. 在我们开发中经常需要在页 ...
angularjs过滤器(number)
angularjs过滤器number,用来精确浮点数用来精确浮点数,指定小数点位数. 在html中用法 {{ number_expression | number : fractionSize}} ...
----------------------过滤器filter简单登录和乱码过滤----
web.xml里面的代码 <?xml version="1.0" encoding="UTF-8"?> <web-app version=&q ...
⑧javaWeb之在例子中学习（过滤器Filter）
前言本系列 Servlet & JSP 学习系列[传送门]逐渐到了中期了,希望大家喜欢我写的,总结的点点滴滴- 今天我们来讲讲过滤器你们的支持是我写博客的动力哦. 最近买了两本书,觉得大二 ...
一场由过滤器Filter引发的血案
一场由过滤器Filter引发的血案事件起因本来应该是下图的登录界面变成了这样 What's the fuck????? 抓狂原因解决方法: 在过滤器中给资源文件开个绿色通道
Java web—Servlet过滤器(Filter)
前言: 过滤器是Servlet中一个非常重要的组成部分,进行WEB开发时无不用到过滤器:因此这篇blog来单独总结下关于过滤器的知识点. 一.首先来了解一下什么是过滤器: 下面这句话引 ...
ITK:过滤器Filter和ParallelizeImageRegion比较
ITK:过滤器Filter和ParallelizeImageRegion比较内容提要输出结果 C++实现代码内容提要本示例演示如何利用MultiThreaderBase :: Parallel ...
ITK:复制过滤器filter
ITK:复制过滤器filter 内容提要输出结果 C++实现代码内容提要复制/复制过滤器输出结果 2 C++实现代码 #include "itkAbsImageFilter.h&qu ...
【若依(ruoyi)】shiro 内置的过滤器(filter)
前言 shiro: 1.5.3 若依(ruoyi): v4.3 (测试shiro的环境) shiro 内置的过滤器(filter) Filter Name Class anon org.apache. ...

深究AngularJS——过滤器（filter）