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“文本的对象都放进个新数组并返回该数组。
常用过滤器例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<!-- 向表达式添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到表达式中-->
<p>将字符串转换为大小写:</p>
<div ng-controller="uppercaseController">
<p>姓名为 {{ person.lastName | uppercase }}</p>
</div>
<div ng-controller="lowercaseController">
<p>姓名为 {{ person.lastName | lowercase }}</p>
</div>
<p>货币过滤:</p>
<div ng-controller="costController">
数量:<input type="number" ng-model="quantity">
价格:<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
<!--格式化为货币,默认单位符号为 '$', 小数默认2位-->
{{250 |currency:"RMB ¥":1}}
<!--格式化为货币,指定单位符号为 'RMB ¥', 小数默认2位,这里指定保留一位-->
</div>
<!-- 向指令添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到指令中-->
<p>按国家的字母顺序排序对象:</p>
<div ng-controller="namesController">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<!--json格式过滤-->
<p>json格式过滤:</p>
{{jsonText | json}} <br/>
<!--date格式过滤-->
<p>date格式过滤:</p>
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}</span><br/>
<!--number格式过滤:参数:指定小float类型保留几位小数-->
<p>number格式过滤:保留一位小数</p>
{{1.2345678 |number:1}}<br/>
<!--字符串截取-->
<p>字符串截取:</p>
{{ "i love tank" | limitTo:6 }}<br/>
{{ "i love tank" | limitTo:-6 }}<br/>
<!--对象排序:降序-->
<p>对象排序:降序:orderBy:'id':true</p>
{{
[{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}] | orderBy:'id':true
}}
<br/>
<!--对象排序:升序:默认升序-->
<p>对象排序:默认升序:orderBy:'id'</p>
{{
[{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}] | orderBy:'id'
}}
</div>
<p>按输入的字母显示对象:</p>
<div ng-controller="namesFilterController">
<p>输入过滤:filter 过滤器从数组中选择一个子集,
通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。未指定属性,全文搜索关键字</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country':true">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
<p>name筛选:指定了筛选name,name中搜索关键字</p>
<ul>
<li ng-repeat="x in names | filter:{'name':name} | orderBy:'country':true">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
{{
[{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'sunm'}<!--指定了筛选名字为sunm-->
}}
</div>
<br>
<div ng-controller="childController">
<!--用来处理一个数组,然后可以过滤出含有某个子串的元素,作为一个子数组来返回。
可以是字符串数组,也可以是对象数组。
如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。-->
{{ childrenArray | filter : 'a' }} <!--//匹配属性值中含有a的-->
<br>
{{ childrenArray | filter : 4 }} <!--//匹配属性值中含有4的-->
<br>
{{ childrenArray | filter : {name : 'i'} }} <!--//参数是对象,匹配name属性中含有i的-->
<br>
{{childrenArray | filter : func }} <!-- //参数是函数,指定返回age>4的-->
<br>
<br>
<div>{{ childrenArray | orderBy : 'age' }}</div>
<!--//按age属性值进行排序-->
<br>
<div>{{ childrenArray | orderBy : orderFunc }}</div>
<!--//按照函数的返回值进行排序-->
<br>
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>
<!--//如果age相同,按照name进行排序-->
</div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('uppercaseController', function ($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
});
myApp.controller('lowercaseController', function ($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
});
myApp.controller('costController', function ($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
myApp.controller('namesController', function ($scope) {
$scope.names = [
{name: 'Jani', country: 'Norway'},
{name: 'Hege', country: 'Sweden'},
{name: 'Kai', country: 'Denmark'}
];
$scope.jsonText = {foo: "bar", baz: 23};
});
myApp.controller('namesFilterController', function ($scope) {
$scope.names = [
{name: 'Jani', country: 'Norway'},
{name: 'Hege', country: 'Sweden'},
{name: 'Kai', country: 'Denmark'}
];
});
myApp.controller("childController", function ($scope) {
$scope.childrenArray = [
{name: 'kimi', age: 3},
{name: 'cindy', age: 4},
{name: 'anglar', age: 4},
{name: 'shitou', age: 6},
{name: 'tiantian', age: 5}
];
$scope.func = function (e) {
return e.age > 4;
};
$scope.orderFunc = function (e) {
return e.age;
};
});
</script>
</body>
</html>