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

最新推荐文章于 2021-03-15 17:15:15 发布

fushibin888

最新推荐文章于 2021-03-15 17:15:15 发布

阅读量311

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/fushibin888/article/details/84626315

版权

在angularJS中，你可自己定义过滤器来格式化数据，下面举个例子：

过滤器允许你什么如何将展示给用户的数据转换后插入到你的模板中。

过滤器的使用语法是：

其中expression表示任何Angular表达式，filterName是你想用的过滤器名称，传递给过滤器的参数用冒号隔开。

当然你也可以自己定义自己的过滤器，比如我们希望创建一个过滤器，它能够将标题的首字母大写。

filter.html

<!doctype html>
<html ng-app="MyModule">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div ng-controller="filterController">
			<h1>{{pageHeading | titleCase}}</h1>			
		</div>
	</body>
	<script src="../angular.min.js"></script>
	<script src="filterController.js"></script>
</html>

filterCroller.js

var myModule = angular.module("MyModule",[]);
myModule.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;
});
myModule.controller('filterController',function($scope) {
$scope.pageHeading = 'welcome to nanjing youth olympic games';
})

运行结果：

Welcome To Nanjing Youth Olympic Games

fushibin888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS中使用过滤器格式化数据

在angularJS中，你可自己定义过滤器来格式化数据，下面举个例子：过滤器允许你什么如何将展示给用户的数据转换后插入到你的模板中。过滤器的使用语法是：{{ expression | filterName : parameter1 : ...parameterN }}其中expression表示任何Angular表达式，filterName是你想用的过滤器名称，传递给过滤器的参...
复制链接

扫一扫