AngularJS指令与过滤器示例-优快云博客

本文通过一个具体的AngularJS应用实例，展示了如何使用AngularJS内置的各种过滤器，包括货币、日期、大小写转换及限制显示等过滤器，并演示了如何对数组进行排序和限制显示。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../kuwenjian/angular.js" ></script>
<script>
var app = angular.module("chen",[]);
app.controller("xu", function($scope,$rootScope){
$scope.money=1000;
var time = new Date();
$scope.data=time;
$scope.name="dfuhvnsYUGBdjfn";
$scope.xz="215.145";
$scope.user = [{
name:"zs",
age:20
},{
name:"ls",
age:21
},{
name:"ww",
age:22
},{
name:"wb",
age:250
}];
$scope.shuzu=[
{name:"张三",age:11},
{name:"李四",age:32},
{name:"王五",age:15},
{name:"马六",age:51},
{name:"包拯",age:21},
];
});

</script>
</head>
<body ng-app="chen" ng-controller="xu">
<p>货币过滤器 :{{money|currency:"￥"}}</p>
        <p>使用lowercase转成小写: {{name|lowercase}}</p>
        <p>使用lowercase转成大写: {{name|uppercase}}</p>
<p>日期过滤器 :{{data |date:"yyyy/MM/dd"}}</p>
<p>整齐的时间过滤器 :{{data|date:'yyyy年MM月dd日 HH时mm分ss秒'}}</p>
<p>限制显示2个字过滤器 :{{xz|limitTo:2}}</p>
<p>限制显示从0下标开始的前4个字过滤器 :{{xz|limitTo:4:0}}</p>
<p>限制显示从2下标开始的前4个字过滤器 :{{xz|limitTo:4:2}}</p>
<p>限制过滤器：{{ user | limitTo:1}}</p>
<p>按照下标降序{{ shuzu | orderBy:"-"}}</p>
<p>排序升序:{{shuzu | orderBy:"+age" }} </p>
</body>
</html>