您的位置：首页 > Web前端 > AngularJS

angularJs常用过滤器

2017-11-14 20:16 274 查看

	<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航