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

深究AngularJS——过滤器（filter）

2016-05-14 14:24 666 查看

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

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>

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

标签：

相关文章推荐

新的分享

章节导航