angularjs的过滤器和$filter服务的区别使用

最新推荐文章于 2025-03-21 12:19:38 发布

大春子

最新推荐文章于 2025-03-21 12:19:38 发布

阅读量1.4k

点赞数

分类专栏： angularjs

本文链接：https://blog.youkuaiyun.com/chun1570754603/article/details/84105189

版权

angularjs 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了AngularJS中过滤器的两种使用方式：直接在HTML中使用和通过$inject注入到控制器中使用。展示了如何利用过滤器进行数据格式化，如货币和数值格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angularjs的过滤器：直接在html中使用

$filter:需要注入到控制器中，在控制器里使用

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>服务</title>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/angular.min.js"></script>	
</head>
<body ng-controller="cc">
	<h1>angular中的filter使用:
		<h5> {{ jiage | currency}}</h5> 
		<h5> {{ n | number:2 }}</h5> 
	</h1>

	<h1>$filter使用 :
		<h5>价格:{{price}}</h5>
		<h5 ng-bind="num"></h5>
               <!-- {{}}花括号和ng-bind的作用一样 -->
	   </h1>	  
</body>
<script type="text/javascript">
	angular.module('app',[])
	.controller('cc',function($scope,$filter) {
		$scope.jiage= 88.88;
		$scope.n= 55.55555;

		$scope.price = 11.11;
		$scope.price=$filter('currency')($scope.price)
		$scope.num = 66.66666;
		$scope.num=$filter('number')($scope.num,2)
	})
</script>
</html>

结果显示：