AngularJS中使用过滤器格式化数据

阅读更多

        在Angular中，可以用过滤器来声明应该如何变换数据格式，然后再显示给用户，你只要在模板中使用一个插值变量即可。使用过滤器的语法是：

{{ expression | filterName : parameter1 : ...parameterN }}

        这里的表达式可以是任意的Angular表达式，fileName是你需要使用的过滤器名称，过滤器的多个参数之间使用冒号分隔。这些参数自身也可以是任何合法的Angular表达式。

        Angular内置了很多过滤器，例如：

{{12.9 | currency}

        以上这段代码将会显示如下结果：

$12.90

        把插值变量声明在视图里面（而不是在控制器或者模型里面），因为数字前面的美元符号对人类来说很重要，而对我们用来处理数据的逻辑来说是没有意义的。

        Angular内置的其他过滤器还有date、number、uppercase等。

        在绑定的过程中，可以用管道符号把过滤器连接起来。例如，对于上面的这个例子，我们可以加一个number过滤器来把小数点后面的数值格式化掉，number过滤器会把数值作为参数传递给round函数。所以：

{{12.9 | currency | number:0}}

        将会显示成：

$13

        在实际开发过程中，不必受限于内置的过滤器，自已编写过滤器也非常简单。例如，为标题文字创建首字母大写的字符串，可以像下面这样开发Filter：

	


	
{{pageHeading | titleCase}}
	
	

运行效果：

 

资料来源：《用AngularJS开发下一代Web应用》

• 
• 大小: 17.1 KB

• 查看图片附件