angularJs常用过滤器

最新推荐文章于 2021-06-02 15:26:38 发布

原创最新推荐文章于 2021-06-02 15:26:38 发布 · 253 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS框架的示例应用，演示了如何利用AngularJS内置的过滤器来格式化显示的数据，包括货币格式化、字符串大小写转换、日期格式化等。

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

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="libs/angular.min.js"></script>
	<script>
	var app=angular.module("gaoynApp",[]);
	app.controller("democ",["$scope",function($scope){

	$scope.nowd=new Date();//获取当前日期
	console.log("当前日期",$scope.nowd);
	}]);
	</script>
	</head>

	<body ng-app="gaoynApp" ng-controller="democ">
	常用过滤器:指定数据格式
	<ul>
	<li>
	请输入你的资产
	<input ng-model="mymoney" />
	<p>
	使用过滤器指定钱格式数据\|currency:"$" {{mymoney\|currency:'￥'}}
	</p>

	</li>
	<li>
	请输入你的英文名
	<input ng-model="fisrtname" />
	<p>
	使用过滤器指定转为大写{{fisrtname\|uppercase}}
	</p>
	</li>
	<li>
	当前日期为:
	<p>
	{{nowd\|date: "yyyy年MM月dd日 hh:mm:ss"}}
	</p>
	</li>
	<li>
	limitto:
	<p ng-init="datas=['aa','bb','cc','apple','oranange']">
	{{datas\|limitTo:-2}}
	</p>
	</li>
	<li>
	filter:
	<p ng-init="datas=['aa','bb','cc','apple','oranange']">
	{{datas\|filter:'a'}}
	</p>
	</li>
	<li>
	order by:
	<p ng-init="datas=['aa','bb','cc','apple','oranange','dept']">
	true降序 {{datas\|orderBy: '':true}}
	false升序{{datas\|orderBy: '':false}}
	</p>
	给对象排序
	<p ng-init="stus=[{name:'gaoyn',age:19},{name:'周一',age:29},{name:'王大拿',age:20}]">
	true降序 {{stus\|orderBy: 'age':true}} <br/>
	false升序{{stus\|orderBy: 'age':false}}
	</p>
	指定函数根据age排 name排序
	<p ng-init="stus=[{name:'gaoyn',age:19},{name:'zh',age:29},{name:'王大拿',age:20},{name:'zy',age:19}]">
	true降序 {{stus\|orderBy: ['age','name']:false }} <br/>
	</p>
	</li>
	</ul>
	</body>

	</html>