过滤器
在AngularJS中使用过滤器格式化展示数据 ,作用就是接收一个输入,通过某个规则进行处理.然后返回处理结果.
1.angular内置了9个过滤器:
- 1.
currency:将数值格式化为货币格式 - 2.
data:日期格式化 , 年(y), 月(M), 日(d), 星期(EEEE/EEE), 时(H/h), 分(m), 秒(s), 毫秒(.sss), 也可以组合到一起使用 - 3.
filter: 在给定数组中选择满足条件的一个子集,并返回一个新的数组,其条件可以是一个字符串,对象,函数. - 4.
json: 将Javascript 对象转换成JSON字符串. - 5.
limitTo: 取出字符串或数组前(正数)几位,或后(负数)几位 - 6.
lowercase:将文本转换成小写格式 - 7.
uppercase:将文本转换成大写格式 - 8.
number: 数字格式化, 可控制小数位数 - 9.
orderBy: 对数组进行排序, 第2个参数可控制方向
2.管道符
- 管道符: 把上次结果,作为下次参数传递 |
- 注意:过滤器本质就是一个方法 /函数/ function,
- 过滤器会自动把 | 前面的内容,当作方法第一个参数传入
<p>{{price | currency:'￥'}}</p>
伪代码:
function currency(input, arg){
return arg + input;
}
- 注意2:如果想要自己手动传参 ,使用冒号 : 传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
angular 内容
1.内置指令
2.自定义指令
3.过滤器 ->对数据进行格式化处理 ￥12 new Date -> yyyy-MM-dd
4.服务
5.路由
管道符:把上次结果,作为下次参数传递 |
注意:过滤器本质就是一个方法 /函数/ function, 过滤器会自动把 | 前面的内容,当作方法第一个参数传入
伪代码:
function currency(input, arg){
return arg + input;
}
注意2:如果想要自己手动传参 ,使用冒号 : 传递
-->
<body ng-app="app" ng-controller="xmgController">
<p>{{price | currency:'￥'}}</p>
<p>{{curDate | date:'yyyy-MM-dd hh:mm:ss'}}</p>
<p>{{str | uppercase | lowercase}}</p>
<p>{{num| number:2}}</p><!--参数：保留几位小数-->
<p>{{course | limitTo: -1}}</p><!--参数为负 代表倒着截取-->
</body>
<script src="js/angular.js"></script>
<script>
//1.创建模块
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.price = 12.0;
$scope.curDate = new Date();
$scope.str = 'xmgSK666';
$scope.num = 3.1415926;
$scope.course = ['html', 'css', 'js'];
}]);
//3.绑定模块 ng-app="app"
//4.绑定控制器 ng-controller="xmgController"
</script>
</html>
