AngularJS 过滤器-优快云博客

本文链接：https://blog.youkuaiyun.com/yana_loo/article/details/69258865

本文介绍了AngularJS中各种过滤器的应用实例，包括内置过滤器如转换大小写、货币格式化等，以及如何创建自定义过滤器来实现特定的数据处理需求。

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

过滤器使用（|）添加到表达式和命令中

lowercase 小写 uppercase 大写

<div ng-app="myApp" ng-controller="myText">
	<p>First Name : {{firstName | lowercase}}</p>
	<p>Last Name : {{lastName | uppercase}}</p>
</div>
<script>
	angular.module("myApp",[]).controller("myText",function($scope){
		$scope.firstName="Adela"
		$scope.lastName="Smith"
	})
</script>

currency 过滤器

<div ng-app="myApp" ng-controller="myCtrl">
	Quantity : <input type="number" ng-model="quantity">
	Price : <input type="number" ng-model="price">
	<p> Total Price : {{quantity*price | currency }}</p>
</div>

<script>
	angular.module("myApp",[]).controller("myCtrl",function($scope){
		$scope.quantity=1
		$scope.price=1.5
	})
</script>

过滤输入 Filter

<div ng-app="myApp" ng-controller="myCtrl">
	<p>Filter: <input type="text" ng-model="name"></p>
	<ul>
		<li ng-repeat="x in names | filter:name |orderBy:'id'">
			{{x.id+" "+x.name+" "+x.age}}
		</li>
	</ul>
</div>

<script>
	angular.module("myApp",[]).controller("myCtrl",function($scope){
		$scope.names=[
			{name:'Jack',id:8,age:20},
			{name:'Tom',id:2,age:26},
			{name:'Adela',id:6,age:22},
			{name:'Jane',id:9,age:10},
			{name:'CiCi',id:10,age:30}
		]
	})
</script>

自定义过滤器

<div ng-app="myApp" ng-controller="myCtrl">
	{{ num | sort}}
</div>

<script>
	angular.module("myApp",[]).controller("myCtrl",function($scope){
		$scope.num='58423941'
	}).filter('sort',function(){
		return function(text){
			return text.split("").sort().join(".")
		}
	})
</script>