Angular的过滤器 filter和自定义过滤器

转载：https://www.cnblogs.com/zhangshuda/p/7640082.html

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>

{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

Angular的过滤器 filter和自定义过滤器

Angular的过滤器 filter和自定义过滤器

猜你喜欢