angularjs开发常见问题-2(angularjs内置过滤器)
Posted blfbuaa
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs开发常见问题-2(angularjs内置过滤器)相关的知识,希望对你有一定的参考价值。
在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>
以上是关于angularjs开发常见问题-2(angularjs内置过滤器)的主要内容,如果未能解决你的问题,请参考以下文章
angularjs开发常见问题-2(angularjs内置过滤器)