一、currency   货币格式化

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = '723894734.3425234';
}]);
</script>
</head> <body>
<div ng-controller="Aaa">
<p>{{name | currency:"¥"}}</p> <!--后面会保留两个小数点-->
</div>
</body>
</html>

 

  

二、number            数字格式化

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = '723894734.3525234';
}]);
</script>
</head> <body>
<div ng-controller="Aaa">
<p>{{ name | number : 1 }}</p> <!--0表示需要保留的小数位,这里是没有,1就表示1保留一个小数位 会进行四舍五入-->
</div>
</body>
</html>

三、lowercase/uppercase           大小写格式化

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = 'hello';
}]);
</script>
</head> <body>
<div ng-controller="Aaa">
<p>{{ name | uppercase }}</p>
</div>
</body>
</html>

四、json        对json格式的数据进行格式化  要在pre这个标签中

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = {"name":"hello","age":"20"};
}]);
</script>
</head> <body>
<div ng-controller="Aaa">
<pre>{{ name | json }}</pre>
</div>
</body>
</html>

五、limitTo          截取,可以截取字符串或者数组,后面数组表示截取多少位

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = 'hello';
//$scope.name = ['a','b','c'];
}]);
</script>
</head> <body>
<div ng-controller="Aaa">
<p>{{ name | limitTo : 2 }}</p>
</div>
</body>
</html>

六、date            对时间毫秒值进行时间格式化

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = '3748935795'; //时间毫秒值
}]);
</script>
</head> <body>
<div ng-controller="Aaa">
<p>{{ name | date }}</p>
<p>{{ name | date : 'yyyy' }}</p> <!--后面的yyyy表示可以自己设置时间的格式-->
</div>
</body>
</html>

七、orderBy         排序作用,针对的是一个数组

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){ //必须是下面的格式才能进行排序
$scope.name = [
{color:"red",age:"20"},
{color:"yellow",age:"30"},
{color:"blue",age:"40"},
{color:"green",age:"10"}
];
}]);
</script>
</head> <body>
<div ng-controller="Aaa">
<p>{{ name | orderBy : 'age' : true }}</p> <!--age表示根据age进行排序的 true表示从大到小 false表示从小到大-->
</div>
</body>
</html>

八、filter             相当于选择

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){ //必须是下面的格式才能进行排序
$scope.name = [
{color:"red",age:"20"},
{color:"yellow",age:"30"},
{color:"blue",age:"40"},
{color:"green",age:"10"}
];
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{ name | filter : 'red' }}</p> <!--只选择了red 只能是针对value值,对key是没有作用的-->
<p>{{ name | filter : '40' }}</p>
<p>{{ name | filter : 'l' }}</p> <!--只要包含就能匹配--> <p>{{ name | filter : 'l' : true}}</p> <!--这里什么都匹配不到,因为没有l这个,包含有l的也不是-->
</div>
</body>
</html>

angularJs的过滤器的更多相关文章

  1. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  2. AngularJS开发指南13:AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  3. 走进AngularJs(七) 过滤器(filter) - 吕大豹

    时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...

  4. AngularJs(八) 过滤器filter创建

    大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...

  5. 创建 AngularJS 自定义过滤器,带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  6. AngularJs自定义过滤器filter

    AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...

  7. AngularJS之过滤器

    AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...

  8. angularJS的过滤器!

    angularJS过滤器: filter currency date filter json limitTo lowercase number orderBy uppercase ...... Fil ...

  9. AngularJS:过滤器

    ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...

  10. AngularJS 五 过滤器及验证

    AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number               Filter       ...

随机推荐

  1. Android studio的调试方法

    1. DDMS DDMS 全称 Dalvik Debug Monitor Service, dalvik虚拟机调试监控服务. 可以进行的操作有:为测试设备截屏,查看特定行程中正在运行的线程以及堆信息. ...

  2. 自定义ContentTypeHandler在struts2-rest-2.3.16.2不生效

    需要使用自定义的ContentHandler格式化json中的时间类型为指定模式. 在struts.xml中增加了自定义的ContentHandler,但不会生效. http://blog.csdn. ...

  3. 六、curator recipes之屏障barrier

    简介 curator针对分布式场景实现了分布式屏障:barrier.我们在分布式系统中可以使用barrier去阻塞进程,知道某个条件被触发.其实跟Java多线程的barrier是一样的. 例如:当两个 ...

  4. 实例-sprintf() 函数详解-输出格式转换函数

    Part1:实例 $filterfile = basename(PHP_SELF, '.php'); if (isset($_GET['uselastfilter']) && isse ...

  5. 讨论!MyBatis中利用package自动扫描包中的类,默认别名不只是首字母小写!

    问题描述:这个问题我是在看书的时候碰到的.书上写着通过package标签扫描包中的类,将其第一个字母变为小写作为其别名.我在网上查了一些博主也是这么写的 但是!我发现,无论大小写,只要是类名就好,而且 ...

  6. Java https认证的坑

    https单向认证的服务端证书不是权威机构颁发的,网上找了点代码不对https证书进行认证后,报如下异常 javax.net.ssl.SSLHandshakeException: Received f ...

  7. scrum 项目的基本模式

    scrum 项目中有 3 个主要的角色:产品所有者, Scrum 主管和团队成员 产品所有者和团队其他成员一起工作,负责维护生产积压工作表 (production backlog) ,并对表中的项制定 ...

  8. 《JavaWeb从入门到改行》分页功能的实现

    @目录 什么是分页 ? 两个子模块功能的问题分析 和 解决方案 有条件查和无条件查询的影响 和 解决方案 项目案例: mysql + commons-dbutils+itcast-tools+Base ...

  9. git杂记-远程仓库的使用

    查看远程仓库:克隆自己的仓库,如不命名则默认远程仓库名字为origin: $ git clone https://github.com/OuFeng/JF_WEB.git Cloning into ' ...

  10. jQuery中判断input的disabled属性

    <input type="text" id="ipt1" disabled> <input type="text" id= ...