AngularJs自定义过滤器的方法

最新推荐文章于 2023-07-16 21:39:09 发布
最新推荐文章于 2023-07-16 21:39:09 发布
阅读量257 收藏
点赞数
分类专栏： angularJS 文章标签： angularJs

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返回结果。

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

K'illCode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular自定义过滤器
JinLong的博客
04-27 458
Angular自定义过滤器     由于AngularJS中只定义了九中内置过滤器，所以有的指令做不到某些需求，这时候我们需要自己定义过滤器来满足自己定义的功能。 其语法格式如下： Title var app = angular.module("myApp", []); /*app.filter(
angular自定义filter
coolcao的coder点滴
02-05 2813
angular自定义filter angular除了几个自带的常用的filter,还可以自定义filter,以满足不同的需求，简单研究了一下自定义filter，记录一下。 有如下场景，后台返回的数据中，status可能是英文字符串，如果在html中使用if进行挨个判断，则显得有些啰嗦，这样我们就可以使用自定义的filter实现 javasc代码： var myapp = ang
AngularJS-filter过滤器详解（包含自定义）
LoveyourselfJiuhao的博客
01-15 1165
AngularJS: API: ng/filter/filter filter：从array中选择一个条目子集，并作为一个新数组返回。 用法 用于HTML模板绑定 {{ filter_expression | filter : expression : comparator}} 用于JavaScript $filter('filter')(array, expression,...
AngularJS过滤器以及自定义过滤器
汉堡请不要欺负面条
10-11 512
过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 一.AngularJS的filter过滤器 向表达式添加过滤器：可以通过一个管道字符(“|”)和一个过滤器添加到表达式中 1.uppercase|lowercase:大小写转换过滤 {{ youname | uppercase }} {{ youname | lowercase }}
angularjs 自定义过滤器
CWW2016的博客
11-22 158
过滤器格式 模块名称.filter('过滤器名字',function(){ 　　return function(被过滤数据，条件1，条件2，。。。。){ 　　　　//过滤操作 　　}}) 一、不带条件的过滤器 使用方式： * （1）HTML中：<div>{{被过滤的数据 | 过滤器的名字}}</div> //跟内置过滤器一...
AngularJS中自定义过滤器
weixin_33753845的博客
01-08 208
  AngularJS中为我们提供了一些内置的过滤器，这里列举一些自定义过滤器的场景。 自定义过滤器，不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { return function (number) { if (isNaN(number) || number &lt; 1) { ...
AngularJS处理和转换视图中数据的重要工具：过滤器
最新发布
网络技术联盟站
07-16 258
过滤器是 AngularJS 中用于处理视图数据的函数。它们可以接受一个输入值（通常是表达式结果），并返回一个经过处理后的输出值。通过在模板中使用管道符，我们可以在数据绑定和表达式中应用过滤器。例如，下面的代码演示了如何使用内置的uppercase{{ 'hello world' | uppercase }} // 输出结果：HELLO WORLD在上述代码中，uppercase就是一个过滤器，它将字符串转换为大写形式并显示在模板中。除了内置过滤器，我们还可以自定义过滤器来处理特定的需求。
angularjs自定义过滤器demo示例
10-16
总结来说，AngularJS自定义过滤器的主要知识点包括： 1. 创建过滤器：通过`app.filter()`方法，传入过滤器名称和处理函数。 2. 过滤器函数：接收原始数据和参数，返回处理后的新数据。 3. 在视图中使用过滤器：通过...
AngularJS自定义过滤器用法经典实例总结
10-18
以下是对AngularJS自定义过滤器用法的详细说明，包括实例分析和实现技巧。 **过滤器结构** AngularJS中的过滤器通常应用于双括号表达式中，以管道（|）符号分隔。基本结构如下： ```html {{ 原始数据 | 过滤器名 ...
angularJs自定义过滤器实现手机号信息隐藏的方法
10-17
今天小编就为大家分享一篇angularJs自定义过滤器实现手机号信息隐藏的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
angularJS 自定义过滤器
xuanwuziyou的专栏
10-13 1808
本文使用三种方式自定义一个数组过滤器。 数组list: [ { name:'张三', age:20, city:'上海' }, { name:'李思', age:30, city:'北京' }, { name:'王五', age:25, city:'深圳' } ] 1.自定义过滤器方式一 （在controller方法内定义一个方法） html:  
AngularJS 过滤器 （详解）
js_admin的博客
05-19 1440
一、简介 　　AngularJS过滤器能够用来格式化数据，过滤器能够用在表达式和指令中，也能够注入到其他地方进行使用。AngularJS提供了9种常用的内置过滤器，我们还可以创建自定义过滤器来格式数据，以完成更多个性化的要求。 二、使用方式 　　下面是过滤器的三种使用方式，形式如下。 1、在表达式中使用 {{ text | uppercase }} //将字符串text大写输出
angularjs-自定义过滤器示例
火星男孩的分享空间
03-08 1万+
示例一：<!doctype html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"><
angularJs-----$filter过滤器使用 自定义过滤器
wjk_along的博客
02-04 9279
  1.内置过滤器   * $filter 过滤器，是angularJs中用来处理数据以更好的方式展示给我用户。比如格式化日期，转换大小写等等。 * 过滤器即有内置过滤器也支持自定义过滤器。内置过滤器很多，可以百度。关键是如何使用： * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * （1）常用内置过滤器 *       n...
AngularJs基础——过滤器filter及自定义过滤器filter
热门推荐
bboyjoe的博客
01-04 2万+
1.AngularJS的filter过滤器： uppercase|lowercase:大小写转换过滤json:json格式过滤date:日期格式过滤number:数字格式过滤currency:货币格式过滤filter:查找limitTo：字符串对象截取orderBy:对象排序 Angular基础 将字符串转换为大小写：
angularJs 自定义过滤器
丿灬安之若死
09-07 423
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6
angularjs 自定义过滤器 v1.x
loushengyue
02-26 306
AngularJS 过滤器 过滤器可以使用一个管道字符（|）添加到表达式和指令中。 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。 A...
Angularjs学习笔记——AngularJS中$filter过滤器使用(自定义过滤器)
Web魔法师
12-29 2569
1.内置过滤器： * $filter 过滤器，是angularJs中用来处理数据以更好的方式展示给我用户。比如格式化日期，转换大小写等等。 * 过滤器即有内置过滤器也支持自定义过滤器。内置过滤器很多，可以百度。关键是如何使用： * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * *
angular过滤器filter常用方法，自定义过滤器
前端小狮的博客
04-12 1万+
简单介绍AngularJS过滤器filter用法，每个都将列出用法代码以便加深了解； 内置过滤器： currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序) 用法： 1.currency(货币) 使用cur...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值