Filter是用来格式化数据用的。
Filter的基本原型（ ‘|’ 类似于linux中的管道模式）：
{{ exPRession | filter }}Filter可以被链式使用（即连续使用多个filter）：
{{ expression | filter1 | filter2 | ... }}Filter也可以指定多个参数：
{{ expression | filter:argument1:argument2:... }}filterFilter（filter）： 用途：过滤数组
方法原型： function(array, expression, comparator)
用法1（参数expression使用String）： 全文搜索关键字字符串。
<div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]"> <!-- 参数expression使用String，将全文搜索关键字 'a' --> <div ng-repeat="u in myArr | filter:'a' "> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br /> </div> </div>用法2（参数expression使用function）： 按照function返回来过滤。
// 先在Controller中定义function: myFilter $scope.myFilter = function (item) { return item.age === 20; }; <div ng-repeat="u in myArr | filter:myFilter "> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br /> </div>用法3（参数expression使用object）： 过滤找到对象object
<div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]"> <div ng-repeat="u in myArr | filter:{age: 21} "> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br /> </div> </div>用法4（指定comparator为true或false）： 大小写是否敏感。
<div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]"> Name:<input ng-model="yourName" /> <!-- 指定comparator为false或者undefined，即为默认值可不传，将以大小写不敏感的方式匹配任意内容 --> <!-- 可以试试把下面代码的comparator为true，true即大小写及内容均需完全匹配 --> <div ng-repeat="u in myArr | filter:{name:yourName}:false "> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br /> </div> </div>用法5（指定comparator为function）： 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容，但与comparator为false的情况不同的是，comparator必须匹配全文
// 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容，但与comparator为false的情况不同的是，comparator必须匹配全文 $scope.myComparator = function (expected, actual) { return angular.equals(expected.toLowerCase(), actual.toLowerCase()); } <div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]"> Name:<input ng-model="yourName" /> <div ng-repeat="u in myArr | filter:{name:yourName}:myComparator "> <p>Name:{{u.name}}</p> <p>Age:{{u.age}}</p> <br /> </div> </div>Filter: Ng里的过滤器。
常见过滤器： currency：把一个数字格式化成货币模式（如$1,234.56）。当没有提供任何货币符号时，默认使用当前区域的符号。 使用：
HTML：{{ currency_expression | currency:symbol:fractionSize}}JS：$filter(“currency”)(amount,symbol,fractionSize);amount：数值，过滤的值。symbol：字符串，要显示的货币符号或标识符。fractionSize：数值，整数的小数位数，默认为当前的最大位数。date：基于需要的格式将时间格式化成字符串。 使用：
HTML：{{date_expression | date:format:timezone}}JS：$filter(“date”)(date,format,timezone);date：格式化为日期的日期对象。如果没有指定输入的时区字符串，时间则是当地时间。format：格式规则/格式。timezone：时区。filter：从数组中选出一个子集，并将其作为一个新数组返回。 使用：
HTML：{{filter_expression | filter:expression:comparator}}JS：$filter(“filter”)(array,expression,comparator);array：被过滤的数组。expression：字符串/对象/函数，用于从数组中选择数据的判断表达式。使用$可以匹配任何字段。comparator：函数/Boolean/undefined，用于确定预期的值（从filter表达式返回）和实际的值（数组中的对象）进行比较，应视为匹配。function(actual,expected);json：允许将一个javascript对象转换为json字符串。 使用：
HTML：{{json_expression | json:spacing}}JS：$filter(“json”)(object,spacing);object：过滤的对象。spacing：每个缩进的空格数，默认为2。limitTo：创建一个只包含指定数目元素的数组或字符串。 元素是按指定的值和符号（+或-）从数组、字符串或数字的开头或结尾获取的。 如果输入一个数字，则转换为字符串。 使用：
HTML：{{limitTo_expression | limitTo:limit:begin}}JS：$filter(“limitTo”)(input,limit,begin);input：限制的数组，字符串，数字。limit：限制的长度。begin：限制长度开始的位置（根据索引）。lowercase：将字符串转换为小写。 使用：
HTML：{{lowercase_expression | lowercase}}JS：$filter(“lowercase”)(input);Input：过滤的字符串。number：将数值转换为文本。 如果输入是null或undefined，那么其将被返回。如果输入的是无穷（正无穷/负无穷），将会返回无穷大的符号“∞”。如果输入不是一个数字，返回一个空字符串。 使用：
HTML：{{number_expression | number:fractionSize}}JS：$filter(“number”)(number,fractionSize);number：转换的数值。fractionSize：数值，整数的小数位数，默认为当前的最大位数。在默认的区域设置的情况下这个数值是3。orderBy：通过判断表达式将指定的数组进行排序。它是按字符串的字母顺序和数值的数字排序的。
注意：如果你发现数字没有按预期排序，请确保它们实际上是被保存为数字而不是字符串。
使用：
HTML：{{orderBy_expression | orderBy:expression:reverse}}JS：$filter(“orderBy”)(array,expression,reverse);array：排序的数组。expression：字符串/函数/数组，用来确定元素顺序的表达式。reverse：boolean，颠倒数组的顺序。默认为false。uppercase：将字符串转换为大写。 使用：
HTML：{{uppercase_expression |uppercase}}JS：$filter(“uppercase”)(input);Input：过滤的字符串。自带filter使用代码：
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <!-- HTML: {{ctrl.currencyValue | currency:"USD$":1}} --> {{ctrl.currencyValue}} <!-- HTML: {{ctrl.dateValue | date:"yyyy-MM-dd"}} --> {{ctrl.dateValue}} <!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:'2')">{{i}}</div> --> <div ng-repeat="i in ctrl.newArr">{{i}}</div> <!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:{check:true})">{{i}}</div> --> <div ng-repeat="i in ctrl._newArr">{{i}}</div> {{ctrl.obj | json}} <!-- HTML: <div ng-repeat="i in ctrl.arr | limitTo:3:2">{{i}}</div> --> <div ng-repeat="i in ctrl.secondNewArr">{{i}}</div> <!-- HTML: {{ctrl.str | lowercase}} --> {{ctrl.str}} <!-- HTML: <div ng-repeat="i in ctrl.arr | orderBy:'name':true">{{i}}</div> --> <div ng-repeat="i in ctrl.thirdNewArr">{{i}}</div> <!-- HTML: {{ctrl.str | uppercase}} --> {{ctrl.newStr}} </div>基本代码：
angular.module(“x”,[]).filter(“filterName”,[“dependancy”,function(dependancy){ return function(value){ //your code return the data which passed filter（返回过滤后的数据） }; }]);filterName：过滤器名称。 dependency：注入的服务。 value：需要过滤的数据。
filter的自定义方式很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。比如我需要一个过滤器，它可以返回一个数组中下标为奇数的元素，代码如下：
app.filter('odditems',function(){ return function(inputArray){ var array = []; for(var i=0;i<inputArray.length;i++){ if(i%2!==0){ array.push(inputArray[i]); } } return array; }});格式就是这样，你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数，参数就定义在return的那个函数中，作为第二个参数，或者更多个参数也可以。
例子：
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <div ng-repeat="i in newArr=(ctrl.arr | myFilter)"> {{i.value}} </div> </div> (function () { angular.module("Demo", []) .filter("myFilter",myFilter) .controller("testCtrl", ["$filter",testCtrl]); function myFilter(){ return function(value){ var arr = []; angular.forEach(value,function(item,index){ if(item.value.indexOf("this")>=0){ arr.push(item); } }); return arr; } }; function testCtrl($filter) { this.arr = [{"value":"this is a."},{"value":"that is b."},{"value":"this is c."},{"value":"that is a."}]; }; }());这里对数组arr进行过滤，把数组中对象value属性的值含有”this“文本的对象都放进个新数组并返回该数组。
参考： AngularJs filter 过滤器
新闻热点
疑难解答
