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

程序员文章站 2022-04-21 22:24:53

...

在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：

<html>
<head>
	<title>Filter实例</title>
</head>
<body ng-app='HomeModule' ng-controller='HomeController'>
	<h1>{{pageHeading | titleCase}}</h1>
	<script src="lib/angular/angular.js"></script>
	<script>
		var myApp=angular.module('HomeModule',[]);
		myApp.controller('HomeController', function($scope) {
			$scope.pageHeading = 'behold the majesty of your page title';
		});
		myApp.filter('titleCase', function() {
			var titleCaseFilter = function(input) {
				var words = input.split(' ');
				for(var i=0;i<words.length;i++) {
					words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
				}
				return words.join(' ');
			};
			return titleCaseFilter;
		});
	</script>
</body>
</html>

运行效果：

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

博客分类： AngularJS JavaScriptAngularJS过滤器