在angular中内置了几个经常使用的filter,能够简化我们的操作。

过滤器使用 ‘|’ 符号,概念有点相似于linux中的管道。

1、filter (过滤)

filter能够依据条件过滤数据。样例:

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}}

结果:[{"name":"coolcao","age":23}]

这里是过滤含有’coolcao’的对象,不论是哪个属性中含有’coolcao’都能够。

假设要精确过滤,比如仅仅要name为coolcao的能够使用例如以下:

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | filter:{'name':'coolcao'} }}

注意:filter 对象使用的大括号和angularjs取值所用的大括号之间要留至少一个空格(就是最后三个大括号倒数第三个和倒数1。2两个大括号之前留至少一个空格。不然angularjs会解析错误);

2、date : 日期格式化

在系统后台返回的数据中。时间字段,我们可能使用的是时间戳,Long型。在页面显示中肯定格式化为相似于‘2012-12-12 12:12:12’的字符串。使用date过滤器就可以

{{1423130269432 | date:'yyyy-MM-dd HH:mm:ss'}}

显示结果:

2015-02-05 17:57:49

注意:Long型的时间戳字段是以毫秒为单位的,假设系统后台使用的是以秒为单位的。那么在angular里要乘以1000转换为以毫秒为单位。这里一定要分清究竟是秒还是毫秒

3、number : 数字格式化

{{ 3.1415926 | number:1 }}
{{ 3.1415926 | number:2 }}
{{ -3.1415926 | number:2 }}
{{ 3 | number:2 }}
{{ 0.002 | number:2 }}
{{ 0.009 | number:2 }}
{{100 | number}}
{{1000 | number}}
{{1000 | number:2}}

结果:

3.1
3.14
-3.14
3.00
0.00
0.01
100
1,000
1,000.00

4、orderBy 排列

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age'}}

结果:

[{"name":"lily","age":20},{"name":"tom","age":22},{"name":"coolcao","age":23}]

默认是升序排列,假设要倒序:

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age':true}}

5、json格式化

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | json}}

结果:

[ { "name": "coolcao", "age": 23 }, { "name": "lily", "age": 22 }, { "name": "tom", "age": 22 } ]

注意:输入是js的对象(非标准json),输出的是标准的json字符串(属性名称会用双引號)

6、大写和小写转换: uppercase,lowercase

{{'abc' | uppercase}}

将输出大写的 ABC

注意:uppercase,lowercase仅仅能对字符串进行过滤转换

7、currency : 货币的格式化

有时候我们须要把数字显示为货币的形式方便展示。能够使用currency进行格式化

{{1000 | currency }}
{{1000 | currency:"RMB ¥" }}

显示:

$1,000.00
RMB ¥1,000.00

8。 //解析后台传到前台
,换行问题 module 指令

 module.filter('trustHtml', function ($sce) {

        return function (input) {

            return $sce.trustAsHtml(input);

        }

    });

前台

<article id="word-display4" ng-bind-html="outsPrintDetailList.strRowAllMoney | trustHtml"></article>

最新文章

  1. android学习笔记56——Service
  2. 【转】SQL中内连接和外连接
  3. app抓包
  4. springmvc参数类型转换三种方式
  5. windows下Qt Creator5.1.0编写程序以及调用OpenCV库
  6. Hibernate Tomcat JNDI数据源配置(转)
  7. 【可视化】Echarts3坐标系倒映
  8. LeetCode 581. Shortest Unsorted Continuous Subarray (最短无序连续子数组)
  9. CentOS 7配置MariaDB允许指定IP远程连接数据库
  10. 详解Java中对象的软、弱和虚引用的区别
  11. MIP是什么
  12. java mysql数据库链接与资源关闭
  13. okvis代码解读
  14. 008.MySQL-Keepalived搭配脚本02
  15. Word2007:如何在竖版(纵向)页面中间插入横版(横向)页面
  16. [4] 圆锥(Cone)图形的生成算法
  17. Python websocket
  18. mysql 把表中某一列的内容合并为一行
  19. #include &lt;unistd.h&gt; 的作用
  20. 什么是泛型 转载自http://www.blogjava.net/Jack2007/archive/2008/05/05/198566.html

热门文章

  1. [android篇]声明权限
  2. 用ajax异步请求一个块
  3. Android几秒后自动关闭dialog
  4. HDU——3786找出直系亲属(DFS+回溯)
  5. BZOJ 3270 博物馆 ——概率DP 高斯消元
  6. 刷题总结——愤怒的小鸟(NOIPDAY2T3)
  7. 【霍夫曼树】 poj 1521 Entropy
  8. LINUX支持哪些文件系统
  9. Codeforces Round #291 (Div. 2) C. Watto and Mechanism [字典树]
  10. scanf printf函数返回值