|
写这个的目的是希望能学会如何在指令里加入自己的过滤器。
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
|
