AngularJs自定义过滤器的方法

最新推荐文章于 2021-08-11 19:45:32 发布

K'illCode

最新推荐文章于 2021-08-11 19:45:32 发布

阅读量299

点赞数

分类专栏： angularJS 文章标签： angularJs

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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>