AngularJS 过滤器

最新推荐文章于 2025-08-10 14:00:41 发布

原创最新推荐文章于 2025-08-10 14:00:41 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #模块化 #web

web 专栏收录该内容

6 篇文章

订阅专栏

本文通过实例展示了AngularJS中常用的内置过滤器，包括货币、日期格式化、字符串筛选及排序等功能，帮助开发者快速掌握AngularJS数据展示技巧。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS 过滤器</title>
</head>
<body ng-app = "App">

<ul ng-controller="DemoContoller">
<li>{{price|currency:'￥'}}</li>
//1、currency 将数值格式化为货币格式

<li>{{now|date:'yyyy/MM/dd hh/:mm:ss'}}</li>
//2、date 以年月日时分秒的格式显示

<li>{{items|filter:'s'}}</li>
//筛选带有s的字符串、对象、函数，返回值是一个新数组

<li>{{students|filter:{age:16} }}</li>
//3、filter在给定数组中选择满足条件的一个子集，
并返回一个新数组，其条件可以是一个字符串、对象、函数

<li>{{students|json}}</li>
//4、json将Javascrip对象转成JSON字符串。

<li>{{items|limitTo:-1}}</li>
//5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位

<li>{{str|uppercase|limitTo:3}}</li>
6、、uppercase将文本转换成大写格式

<li>{{str|lowercase}}</li>
7、lowercase将文本转换成小写格式

<li>{{num|number:2}}</li>
8、number数字格式化，可控制小位位数

<li>{{items|orderBy: '':true}}</li>
9、orderBy对数组进行排序，第2个参数可控制方向

<li>{{students|orderBy: 'age': false}}</li>

</ul>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App',[]);

App.controller('DemoContoller',['$scope',function($scope){

$scope.price = 11.11;

$scope.now = new Date();

$scope.items = ['html','css','js'];
$scope.students = [
{name: '小红', age: 16},
{name: '小明', age: 16},
{name: '小米', age: 10}

];
$scope.str = 'hello Angular';

$scope.num = '10.2345';
}]);

</script>
</body>
</html>