5、angular的过滤器 filter和自定义过滤器
1、大写
{{'abcde' | uppercase}}2、小写
{{'ABC' | lowercase}}3、货币格式
{{12345 | currency}}
{{ 250 | currency:"RMB ￥ " }}4、向指令添加过滤器
按照country排序
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
5、过滤输入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope',function($scope){
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}])
</script>
6、自定义过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myController">
{{'abc' | reverse}}
</div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope',function($scope){
}])
app.filter('reverse', function(){
return function(text){
return text.split("").reverse().join("")
}
})
</script>
7、保留小数
{{149016.1945000 | number:2}}8、查找
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}9、截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位10、排序
// 根id降序排{{
[
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}
// 根据id升序排
{{
[{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}11、多个参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctl">
<div> newString: {{"jj" | myfilter:1:2:3:5}}
</div>
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
app.filter('myfilter', function() { //可以注入依赖
return function(text) {
var newArguments= Array.prototype.slice.call(arguments);
return text+newArguments.join(',');
}
});
</script>
12、多个filter
{{ expression | filter1 | filter2 | ... }}
13、filter可以接受参数
{{ expression | filter:argument1:argument2:... }}
14、controller中使用filter
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctl">
{{aa}}
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.filter('myfilter', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
app.controller('myCtrl', function($scope,currencyFilter) {
//$scope.aa =$filter('myfilter')('abcd')
$scope.aa = currencyFilter(12345)
});
</script>
- 上一篇 »Java-Filter:过滤器请求拦截
- 下一篇 »Vue.js中过滤器，filter的使用