您的位置：首页 > Web前端 > JavaScript

angular js过滤器

2016-01-18 14:37 495 查看

（1）作用

1.过滤

也就是说根据条件来过滤，通常相当于%like%

2.排序
对结果进行排序，需要传入排序字段

3.渲染
将结果渲染成指定样式，如uppercase，currency。（相当于onRender）

（2）使用方法
1.view中使用
1）表达式
单个过滤条件

{{ expression | filter }}

多个过滤条件

{{ expression | filter1 | filter2 | ... }}

含参数过滤条件

{{ expression | filter:argument1:argument2:... }}

2）指令中

<span ng-repeat="a in array | filter ">

2.在controller和service中使用
注入依赖的$filter

app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date());
}

（3）内置过滤器
一、渲染类

1.currency（货币处理）
能够将数字转化为货币格式，默认为美元符号，也可以自己传入符号

{{num | currency : '￥'}}

2.date（日期处理）
y M d h m s E 分别表示年月日时分秒星期

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

3.lowercase、uppercase（大小写处理）
将字符串转换为大小写

4.number（数字格式处理）
如果是不带参数，则将数字转化为千分位分割格式，如123,21,12

如果带参数，表示float保留的小数位数

{{ num | number : 2 }}

二、过滤类
1.filter（字符串过滤）
可以接受多种类型的参数

$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];

过滤条件

{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }}  //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的
{{childrenArray | filter : func }}  //参数是函数，指定返回age>4的

过滤函数

$scope.func = function(e){return e.age>4;}

2.limitTo（限制数组、字符串长度）
对于字符串、数组才有用。可以传递参数，负数表示从尾部开始截取

{{ childrenArray | limitTo : 2 }}  //将会显示数组中的前两项

三、排序类
orderBy
可以接受多种参数

<div>{{ childrenArray | orderBy : 'age' }}</div>      //按age属性值进行排序，若是-age，则倒序
<div>{{ childrenArray | orderBy : orderFunc }}</div>   //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>  //如果age相同，按照name进行排序

（4）自定义过滤器

1.在模块上使用filter创建过滤器

myFilterModule.filter("reverse",function(){

});

其中reverse是过滤器名称

2.定义过滤器内容

myFilterModule.filter("reverse",function(){
return function(input,uppercase){
var out = "";
for(var i=0 ; i<input.length; i++){
out = input.charAt(i)+out;
}
if(uppercase){
out = out.toUpperCase();
}
return out;
}
});

3.使用

name | reverse：param
4.实例

<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>

<div ng-controller="myAppCtrl">
name:{{ name }}<br>
reverse name:{{ name | reverse }}<br>
reverse&uppercase name:{{ name | reverse:true }}
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);

myAppModule.controller("myAppCtrl",["$scope",function($scope){
$scope.name = "xingoo";
}]);

myAppModule.filter("reverse",function(){
return function(input,uppercase){
var out = "";
for(var i=0 ; i<input.length; i++){
out = input.charAt(i)+out;
}
if(uppercase){
out = out.toUpperCase();
}
return out;
}
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航