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返回结果。
返回结果函数中，第一个参数是要处理的数据，第二个参数是过滤器指定的参数。