angularJs自定义过滤器实现手机号信息隐藏的方法

 更新时间:2018年10月08日 11:15:50   作者:泠泠在路上  
今天小编就为大家分享一篇angularJs自定义过滤器实现手机号信息隐藏的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<div ng-app="module" ng-controller="ctrl">
 <table border="1" width="600">
  <tr>
   <td>编号</td>
   <td>姓名</td>
   <td>手机号</td>
  </tr>
  <tr ng-repeat="(k,v) in data">
   <td>{{v.id}}</td>
   <td>{{v.name}}</td>
   <td>{{v.mobile|truncate:4}}</td>
  </tr>
 </table>
</div>
<script>
 var m = angular.module('module', []);
/*自定义过滤器truncate*/
 m.filter('truncate',function(){
  return function(mobile,len){
   len = len?len:3;
   return mobile.substr(0,11-len)+new String('*').repeat(len);
  }
 });
 m.controller('ctrl', ['$scope', '$filter', function ($scope, $filter) {
  $scope.data = [
   {id: 1, name: '张三', mobile: '14567654445'},
   {id: 2, name: '李四', mobile: '13910959565'},
   {id: 3, name: '王五', mobile: '13232343425'},
  ];
 }]);
</script>

效果图:

angularJs 手机号信息隐藏

以上这篇angularJs自定义过滤器实现手机号信息隐藏的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • AngularJS基础学习笔记之指令

    AngularJS基础学习笔记之指令

    指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。
    2015-05-05
  • angular6 Error:Debug Failure at typeToString解决分析

    angular6 Error:Debug Failure at typeToString解决分析

    这篇文章主要为大家介绍了angular6 Error:Debug Failure at typeToString解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • 详解用webpack2搭建angular2的项目

    详解用webpack2搭建angular2的项目

    本篇文章主要介绍了详解用webpack2搭建angular2的项目 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

    AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

    这篇文章主要介绍了AngularJS实现的鼠标拖动画矩形框,涉及基于AngularJS的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-05-05
  • angular6开发steps步骤条组件

    angular6开发steps步骤条组件

    这篇文章主要为大家详细介绍了angular6开发steps步骤条组件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • AngularJs IE Compatibility 兼容老版本IE

    AngularJs IE Compatibility 兼容老版本IE

    本文主要介绍AngularJs IE Compatibility 兼容老版本IE的问题及解决办法,有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS与BootStrap模仿百度分页的示例代码

    AngularJS与BootStrap模仿百度分页的示例代码

    分页在很多时候都能用到,这篇文章主要介绍了AngularJS与BootStrap模仿百度分页的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • AngularJs定制样式插入到ueditor中的问题小结

    AngularJs定制样式插入到ueditor中的问题小结

    这篇文章主要介绍了AngularJs定制样式插入到ueditor中的问题小结的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 详解AngularJS过滤器的使用

    详解AngularJS过滤器的使用

    这篇文章主要为大家详细介绍了AngularJS过滤器的使用方法,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • AngularJS Ajax详解及示例代码

    AngularJS Ajax详解及示例代码

    本文主要讲解AngularJS Ajax的知识,这里提供详细资料及代码示例,帮助学习AngularJS的朋友,有需要的小伙伴可以参考下
    2016-08-08

最新评论