博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularjs 过滤器filter
阅读量:7106 次
发布时间:2019-06-28

本文共 1250 字,大约阅读时间需要 4 分钟。

    在前面介绍angularjs已经很多了,中途由于工作和一切生活琐事,暂停了很久。今天在这里将继续angularjs讲解,这节我们来看看angularjs的过滤去filter。

      在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。

      如下实例:

html:

 
  1. <div ng-app="app" ng-controller="test"> 
  2. num:<input ng-model="num" /> 
  3. <br/> 
  4. {
    {num | number}}  
  5. <br/> 
  6. {
    {num | number:2}}  
  7. <br/> 
  8. first name:<input ng-model="person.first"/> 
  9. <br/> 
  10. last name:<input ng-model="person.last"/> 
  11. <br/> 
  12. name: {
    {person | fullname}}  
  13.     <br/> 
  14. name: {
    {person | fullname:"- -"}}  
  15.        <br/> 
  16. name: {
    {person | fullname:" " | uppercase }}  
  17. </div>​ 

js:

 
  1. function test($scope) {  
  2.  
  3. }  
  4. angular.module("app", []).controller("test", test).  
  5. filter("fullname"function() {  
  6.     var filterfun = function(person, sep) {  
  7.         sep = sep || " ";  
  8.         person = person || {};  
  9.         person.first = person.first || "";  
  10.         person.last = person.last || "";  
  11.         return person.first + sep + person.last;  
  12.     };  
  13.     return filterfun;  
  14. });​ 

jsfiddle效果:

 

 

     在实例中首先演示了angularjs自带的number的filter使用。再同样为我们样式了如何去创建一个angularjs的filter。其实现很简单.angularjs使得扩展一切变得自然

     最后说明:filters支持链式写法,如何powershell或者其他操作系统外壳语言一样的管道式模型,形如 value | filter1 | filter2。

 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/1045817,如需转载请自行联系原作者

你可能感兴趣的文章
阿里云 Aliplayer高级功能介绍(三):多字幕
查看>>
Data Lake Analytics账号和权限体系详细介绍
查看>>
Spring 定时任务
查看>>
考虑自定义的序列化模式(75)
查看>>
11.22 访问日志不记录静态文件 11.23 访问日志切割 11.24 静态元素过期时间
查看>>
文档查看cat_more_less_head_tail
查看>>
jdk8重新认识hashmap
查看>>
Spring Cloud Alibaba迁移指南(二):零代码替换 Eureka
查看>>
Visual Paradigm 教程[UML]:如何绘制封装图?(下)
查看>>
初探AngularJS6.x---目录结构说明
查看>>
kafka解决了什么问题?
查看>>
android流式布局、待办事项应用、贝塞尔曲线、MVP+Rxjava+Retrofit、艺术图片应用等源码...
查看>>
ppwjs之bootstrap文字排版:<pre>元素 [scroll](预格式元素 [带滚动条)
查看>>
Spring经典的面试题,你值得拥有!
查看>>
Ember.js 属性值模糊查询
查看>>
squid配置
查看>>
OSChina 周三乱弹 —— 生活要懂得苦中作乐
查看>>
前端那些事之react--redux篇
查看>>
Ubuntu 16.04 U盘安装过程
查看>>
UIApplication、AppDelegate、委托
查看>>