AngularJS过滤器

来源:互联网 发布:dna数据库 编辑:程序博客网 时间:2024/06/09 15:45
<title></title>
<script type="text/javascript" src="../../angular/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$rootScope){
$scope.money = 100;
//创建时间对象
var date = new Date();
$scope.date = date;

$scope.num = 123.456;
$scope.user = [{
name:"zs",
age:20
},{
name:"ls",
age:21
},{
name:"ww",
age:22
},{
name:"wb",
age:250
}];

//$scope.student = "zazzz";
$scope.student = [{
name:"张三",
age:20
},{
name:"李四",
age:21
},{
name:"王五",
age:22
},{
name:"赵六",
age:38
},{
name:"王八",
age:28
}];
});

</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" >
<p>货币过滤器:{{money | currency:"¥"}}</p>
<p>大写过滤器:{{"hello,bawei" | uppercase}}</p>
<p>大写过滤器:{{"HELLO,BAWEI" | lowercase}}</p>
<p>日期过滤器:{{ date | date:"yyyy/MM/dd hh:mm:ss"}}</p>
<p>限制过滤器:{{ num | limitTo:-3}}</p>
<p>限制过滤器:{{ user | limitTo:-2}}</p>

<p>filter过滤器:{{ student | filter:{"name":"张三","age":20} }}</p>
<hr />
<!--排序-->
<p>默认排序(按下标):{{student | orderBy }}</p>
<p>按下标升序:{{student | orderBy:true }}</p>
<p>按下标降序:{{student | orderBy:"-" }}</p>
<p>按年龄降序:{{student | orderBy:"-name" }}</p>

</body>