欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJs自定义过滤器的方法教程

程序员文章站 2022-05-03 08:58:35
AngularJs提供了自定义过滤器的方法,如果现有的过滤器不能完全支持业务需求,那我们可以通过扩展的方法来实现: 比如我要把一个手机号的后3位数字变成【*】星号,代码如下:...

AngularJs提供了自定义过滤器的方法,如果现有的过滤器不能完全支持业务需求,那我们可以通过扩展的方法来实现:

比如我要把一个手机号的后3位数字变成【*】星号,代码如下:

01	<!DOCTYPE html>
02	<html lang="en">
03	<head>
04	    <meta charset="UTF-8">
05	    <title>Title</title>
06	    <style type="text/css">
07	        .ng-cloak{display:none;}
08	        td{height:30px;line-height:30px;padding:0px 10px;text-align:center;}
09	    </style>
10	</head>
11	<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
12	    <table cellpadding="0" cellspacing="0" border="1">
13	        <thead>
14	        <tr>
15	            <td>姓名</td>
16	            <td>年龄</td>
17	            <td>性别</td>
18	            <td>手机号</td>
19	        </tr>
20	        </thead>
21	        <tbody>
22	        <tr ng-repeat="v in data">
23	            <td>{{v.user}}</td>
24	            <td>{{v.age}}</td>
25	            <td>{{v.sex}}</td>
26	            <td>{{v.mobile|truncate:6}}</td>
27	        </tr>
28	        </tbody>
29	    </table>
30	</body>
31	</html>
32	<script type="text/javascript" src="../js/angular.min.js"></script>
33	<script type="text/javascript">
34	    var m = angular.module('app', []);
35	    m.controller('ctrl', ['$scope', function($scope){
36	        $scope.data = [
37	            {user:'张三', age:23, sex:'男', mobile:13126919232},
38	            {user:'李四', age:26, sex:'女', mobile:15024407449},
39	            {user:'王五', age:24, sex:'男', mobile:13293609908}
40	        ];
41	    }]);
42	//自定义filter过滤器
43	    m.filter('truncate', function(){
44	        return function(mobile, len){
45	            var len = len ? len : 3;
46	            return String(mobile).substr(0, 11-len)+new String('*').repeat(len);
47	        }
48	    });
49	</script>

自定义filter过滤器,第一个参数是过滤器名称,第二个是回调函数,return返回结果。

返回结果函数中,第一个参数是要处理的数据,第二个参数是过滤器指定的参数。