深究AngularJS——过滤器（filter）
写这个的目的是希望能学会如何在指令里加入自己的过滤器。
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>我以一个将字符串折分成数组的过滤器举例。在页面上需要传两参数时，就在过滤器后面以冒号（:）隔开，如下面要传的分割器；在页面要实现传三个及以上的参数时，我们可以通过在过滤器后面继续加冒号（ :） 和参数的格式添加。总结就是，第一个参数是管道符号前面的数据，多个参数时，在过滤器名称后面以冒号隔开。
<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><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>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
