AngularJs filter 过滤器
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>
(function () { angular.module("Demo", []) .controller("testCtrl", ["$filter",testCtrl]); function testCtrl($filter) { this.currencyValue = 1234.56; this.currencyValue = $filter("currency")(this.currencyValue,"USD$",1); this.dateValue = new Date(); this.dateValue = $filter("date")(this.dateValue,"yyyy-MM-dd"); this.arr = [{name:'John', phone:'555-1276',check:true}, {name:'Mary', phone:'800-BIG-MARY',check:false}, {name:'Mike', phone:'555-4321',check:true}, {name:'Adam', phone:'555-5678',check:true}, {name:'Julie', phone:'555-8765',check:false}, {name:'Juliette', phone:'555-5678',check:true}]; this.newArr = $filter("filter")(this.arr,"2"); this._newArr = $filter("filter")(this.arr,{check:true}); this.obj = {"name":"beast","age":21}; this.secondNewArr = $filter("limitTo")(this.arr,3,2); this.str = "Hello World"; this.str = $filter("lowercase")(this.str); this.thirdNewArr = $filter("orderBy")(this.arr,"name",true); this.newStr = $filter("uppercase")(this.str); }; }());
自定义filter
基本代码：
angular.module(“x”,[]).filter(“filterName”,[“dependancy”,function(dependancy){ return function(value){ //your code return the data which passed filter（返回过滤后的数据） }; }]);
filterName：过滤器名称。
dependency：注入的服务。
value：需要过滤的数据。
自定义filter使用代码：
<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“文本的对象都放进个新数组并返回该数组。
关于自定义filter中为什么执行两次的问题请参考：Stack Overflow
