过滤器:{{数据|过滤器:参数}} 格式化展示数据。 "|"相当于管道,可以通过多个"|"来同时使用多个过滤器。 ":"表示参数,多个冒号多个参数。
demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<script src="angular.min.js"></script> <!-- 引入AngularJS框架 -->
</head>
<body ng-app="App">
<ul ng-controller="DemoController">
<li>{{price|currency:'¥'}}</li> <!-- {{数据|currency}} 格式化成货币 -->
<li>{{now|date:'yyyy-MM-dd hh:mm:ss'}}</li>
<li>{{myArr|filter:'s'}}</li> <!-- 只输出数组中包含's'的项 -->
<li>{{students|filter:{age:12} }}</li> <!-- 把age为12的对象过滤出来。 如果参数是对象,需要在对象的"}"后面再加一个空格 -->
<li>{{students|json}}</li> <!-- 将JS对象转成JSON字符串(一般用于调试) -->
<li>{{myArr|limitTo:2}}</li> <!-- limitTo截取数组的前2项;-1表示最后一项 -->
<li>{{str|uppercase}}</li> <!-- uppercase 转成大写 -->
<li>{{str|lowercase}}</li> <!-- lowercase 转成小写 -->
<li>{{num|number}}</li> <!-- number 纯数字字符串转成数字,(默认保留3位小数) -->
<li>{{num|number:2}}</li> <!-- number 保留2位小数 -->
<li>{{myArr|orderBy}}</li> <!-- 按ask码进行排序 -->
<li>{{myArr|orderBy:'':true}}</li> <!-- 两个参数两个":",第二个参数表示倒序 -->
<li>{{students|orderBy:'age':true}}</li> <!-- 第一个参数表示按"age"排序 -->
<li>{{str|uppercase|limitTo:3}}</li> <!-- "|"相当于管道,可以通过多个"|"来使用多个过滤器 -->
</ul>
<script>
var App = angular.module('App',[]);
App.controller("DemoController",['$scope',function($scope) {
$scope.price = 11.1111111;
$scope.now = new Date();
$scope.myArr = ['html','css','js'];
$scope.students = [
{name:"张三",age:12},
{name:"张四",age:15},
{name:"张五",age:12}
];
$scope.str = "Hello";
$scope.num = "10.666666666";
}]);
</script>
</body>
</html>