本文通过实例展示了AngularJS中常用的过滤器功能，包括货币格式化、字符串转大写、日期格式化、数组截取、数组过滤及排序等操作。
<!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>
<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>
扫一扫
4735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
