AngularJS过滤器filter用法实例分析
更新时间：2016年11月04日 14:13:35 作者：破狼
这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式分析了过滤器filter的定义与使用技巧,需要的朋友可以参考下
本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考，具体如下：
这节我们来看看angularjs的过滤器filter。
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。比如时间本地化，或者yyyy-MM-dd HH:mm:ss格式，数字精度格式化，本地化，人名格式化等等。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。
如下实例：
html:
<div ng-app="app" ng-controller="test">
num:<input ng-model="num" />
<br/>
{{num | number}}
<br/>
{{num | number:2}}
<br/>
first name:<input ng-model="person.first"/>
<br/>
last name:<input ng-model="person.last"/>
<br/>
name: {{person | fullname}}
<br/>
name: {{person | fullname:"- -"}}
<br/>
name: {{person | fullname:" " | uppercase }}
</div>
js:
function test($scope) {
}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
var filterfun = function(person, sep) {
sep = sep || " ";
person = person || {};
person.first = person.first || "";
person.last = person.last || "";
return person.first + sep + person.last;
};
return filterfun;
});
jsfiddle效果：http://jsfiddle.net/whitewolf/uCPPK/9/
在实例中首先演示了angularjs自带的number的filter使用。再同样为我们样式了如何去创建一个angularjs的filter。其实现很简单.angularjs使得扩展一切变得自然
最后说明：angularjs filters支持链式写法，如何powershell或者其他操作系统外壳语言一样的管道式模型，形如 value | filter1 | filter2。
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
这篇文章主要给大家介绍了关于Angular进行简单单元测试的实现方法，文中仅用了几行代码，文中通过示例代码介绍的非常详细，对大家学习或者使用Angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-08-08
详解基于Angular4+ server render(服务端渲染)开发教程
本篇文章主要介绍了详解基于Angular4+ server render(服务端渲染)开发教程 ，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
本文主要介绍了Angular的共享模块的实现，对此感兴趣的同学，可以实验一下2021-05-05
本文通过示例向大家介绍了AngularJS语法的使用，小伙伴们认真研读下吧，非常的实用哦。2015-01-01
AngularJS实现controller控制器间共享数据的方法示例
这篇文章主要介绍了AngularJS实现controller控制器间共享数据的方法,结合简单实例形式分析了AngularJS控制器数据共享的实现方法,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了 AngularJS封装$http.post()实例详解的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了浅谈Angular单元测试总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
使用Angular CLI进行Build(构建)和Serve详解
这篇文章主要介绍了使用Angular CLI进行Build(构建)和Serve详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
AngularJS ng-controller 指令简单实例
本文主要介绍AngularJS ng-controller 指令,这里对ng-controller指令资料的整理,并附代码示例和效果图,有需要的朋友看下2016-08-08
今天小编就为大家分享一篇Angularjs之ngModel中的值验证绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论