18、AngularJs自定义过滤器的方法

阅读() @2019-03-17 16:05:14

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .ng-cloak{display:none;}
        td{height:30px;line-height:30px;padding:0px 10px;text-align:center;}
    </style>
</head>
<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
    <table cellpadding="0" cellspacing="0" border="1">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>手机号</td>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="v in data">
            <td>{{v.user}}</td>
            <td>{{v.age}}</td>
            <td>{{v.sex}}</td>
            <td>{{v.mobile|truncate:6}}</td>
        </tr>
        </tbody>
    </table>
</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
    var m = angular.module('app', []);
    m.controller('ctrl', ['$scope', function($scope){
        $scope.data = [
            {user:'张三', age:23, sex:'男', mobile:13126919232},
            {user:'李四', age:26, sex:'女', mobile:15024407449},
            {user:'王五', age:24, sex:'男', mobile:13293609908}
        ];
    }]);
//自定义filter过滤器
    m.filter('truncate', function(){
        return function(mobile, len){
            var len = len ? len : 3;
            return String(mobile).substr(0, 11-len)+new String('*').repeat(len);
        }
    });
</script>

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

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

微信二维码