详解AngularJS中自定义过滤器


Posted in Javascript onDecember 28, 2015

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。ng内置了一些过滤器,它们是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。

AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景。

自定义过滤器,不带参数

//过滤 不带参数
app.filter('ordinal', function () {
return function (number) {
if (isNaN(number) || number < 1) {
return number;
} else {
var lastDigit = number % 10;
if (lastDigit === 1) {
return number + 'st'
} else if (lastDigit === 2) {
return number + 'nd'
} else if (lastDigit === 3) {
return number + 'rd'
} else if (lastDigit > 3) {
return number + 'th'
}
}
}
});

大致这样使用:

{{777 | ordinal}}

过滤 带参数

把某个位置上的字母转换成大写。

//过滤 带参数
app.filter('capitalize', function () {
//input 需要过滤的元素
//char位置,索引减一
return function (input, char) {
if (isNaN(input)) {
//如果序号位置没有设置,索引位置默认是0
var char = char - 1 || 0;
//把过滤元素索引位置上的字母转换成大写
var letter = input.charAt(char).toUpperCase();
var out = [];
for (var i = 0; i < input.length; i++) {
if (i == char) {
out.push(letter);
} else {
out.push(input[i]);
}
}
return out.join('');
} else {
return input;
}
}
});

大致这样使用:

{{'seven' | capitalize:3}}

过滤集合

过滤出集合中满足某种条件的元素。

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.languages = [
{name: 'C#', type: 'static'},
{name: 'PHP', type: 'dynamic'},
{name: 'Go', type: 'static'},
{name: 'JavaScript', type: 'dynamic'},
{name: 'Rust', type: 'static'}
];
});
//过滤集合
app.filter('staticLanguage', function () {
return function (input) {
var out = [];
angular.forEach(input, function (language) {
if (language.type === 'static') {
out.push(language);
}
});
return out;
}
});

大致这样使用:

<li ng-repeat="lang in languages | staticLanguage">{{lang.name}}</li>

过滤,带多个参数,做多件事

定义数字的显示单位和显示位置。

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.digit = 29.88;
});
//过滤 做多件事 多个参赛
app.filter('customCurrency', function () {
return function (input, symbol, place) {
if (isNaN(input)) {
return input;
} else {
//检查symbol是否有实参
var symbol = symbol || '¥';
var place = place === undefined ? true : place;
if(place===true){
return symbol+input;
}else{
return input + symbol;
}
}
}
});

大致这样使用:

<p><strong>Original:</strong></p>
<ul><li>{{digit}}</li></ul>
<p><strong>Custom Currency Filter</strong></p>
<ul>
<li>{{digit | customCurrency}} --Default</li>
<li>{{digit | customCurrency:'元'}} --custom symbol</li>
<li>{{digit | customCurrency:'元':false}} -- custom symbol and custom location</li>
</ul>

filter的两种使用方法

1. 在模板中使用filter

我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:

{{ expression | filter }}

也可以多个filter连用,上一个filter的输出将作为下一个filter的输入(怪不得这货长的跟管道一个样。。)

{{ expression | filter1 | filter2 | ... }}

filter可以接收参数,参数用 : 进行分割,如下:

{{ expression | filter:argument1:argument2:... }}

除了对{{}}中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:

<span ng-repeat="a in array | filter ">

2. 在controller和service中使用filter

我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中使用currency过滤器,只需将它注入到该controller中即可,代码如下:

app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534); 
}

在模板中使用{{num}}就可以直接输出 $123,534.00了!在服务中使用filter也是同样的道理。

此时你可能会有疑惑,如果我要在controller中使用多个filter,难道要一个一个注入吗,这岂不太费劲了?小兄弟莫着急~ng提供了一个$filter服务可以来调用所需的filter,你只需注入一个$filter就够了,使用方法如下:

app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date()); 
}

可以达到同样的效果。好处是你可以方便使用不同的filter了。

Javascript 相关文章推荐
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
js运动应用实例解析
Dec 28 #Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 #Javascript
浅析JS运动
Dec 28 #Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 #Javascript
js时间戳转为日期格式的方法
Dec 28 #Javascript
jquery实现全屏滚动
Dec 28 #Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
vue-cli配置环境变量的方法
2018/07/09 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
js实现列表按字母排序
2020/08/11 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python数组并集交集补集代码实例
2020/02/18 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
幼儿园保教管理制度
2014/02/03 职场文书
护理见习报告范文
2014/11/03 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript