Angular.js之内置过滤器学习笔记

2022-07-21 07:50:39

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularFilter</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>
　　<body ng-app="angularJS" ng-controller="ctrl">
　　　　<div>{{time | date:'yyyy年mm月dd日 hh时mm分ss秒'}}</div>
　　　　<div>{{money | currency:'￥':3}}</div>
　　　　<span>{{money | number:3}}</span>
　　　　<span>{{string | lowercase}} or:{{string | uppercase}}</span>
　　　　<span>{{string | limitTo:2:0}}</span>
　　　　<div>{{data | orderBy:'id':false}}</div>
　　　　<div>{{data | filter:'jinDon':false}}</div>

<script type="text/javascript">
　　　　/*angular.js内置过滤器:
　　　　*currency/number：货币/数值过滤器，currency的第二个参数为小数点位数，采取四舍五入
　　　　*lowercase/uppercase
　　　　*limitTo/date：limitTo第一个参数为截取字符串长度，第二个参数为起始位置
　　　　*orderBy/filter:orderBy第二个参数为true时为倒序;filter第二个参数为true时要完全匹配才筛选成功,为false时只需要包含筛选字符串既筛选成功
　　　　*/
　　　　var m=angular.module('angularJS',[]);
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.time=new Date().getTime();
　　　　　　$scope.money=890.43655;
　　　　　　$scope.string="China";
　　　　　　$scope.data=[{
　　　　　　　　　　　　　　id:1,
　　　　　　　　　　　　　　title:"jinDon store"
　　　　　　　　　　　　},{
　　　　　　　　　　　　　　id:2,
　　　　　　　　　　　　　　title:"SuNing store"
　　　　　　　　　　　　},{
　　　　　　　　　　　　　　id:3,
　　　　　　　　　　　　　　title:"TianMao store"
　　　　　　　　　　　　},{
　　　　　　　　　　　　　　id:4,
　　　　　　　　　　　　　　title:"TaoBao store"
　　　　　　　}];
　　　　　}]);
</script>
</body>
</html>