angularJs的过滤器
一、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的过滤器的更多相关文章
- AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...
- AngularJS开发指南13：AngularJS的过滤器详解
AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...
- 走进AngularJs(七) 过滤器（filter） - 吕大豹
时间 2013-12-15 16:22:00 博客园-原创精华区 原文 http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...
- AngularJs(八) 过滤器filter创建
大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...
- 创建 AngularJS 自定义过滤器，带自定义参数
Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...
- AngularJs自定义过滤器filter
AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...
- AngularJS之过滤器
AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...
- angularJS的过滤器！
angularJS过滤器: filter currency date filter json limitTo lowercase number orderBy uppercase ...... Fil ...
- AngularJS：过滤器
ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...
- AngularJS 五 过滤器及验证
AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number Filter ...
随机推荐
- Android studio的调试方法
1. DDMS DDMS 全称 Dalvik Debug Monitor Service, dalvik虚拟机调试监控服务. 可以进行的操作有:为测试设备截屏,查看特定行程中正在运行的线程以及堆信息. ...
- 自定义ContentTypeHandler在struts2-rest-2.3.16.2不生效
需要使用自定义的ContentHandler格式化json中的时间类型为指定模式. 在struts.xml中增加了自定义的ContentHandler,但不会生效. http://blog.csdn. ...
- 六、curator recipes之屏障barrier
简介 curator针对分布式场景实现了分布式屏障:barrier.我们在分布式系统中可以使用barrier去阻塞进程,知道某个条件被触发.其实跟Java多线程的barrier是一样的. 例如:当两个 ...
- 实例-sprintf() 函数详解-输出格式转换函数
Part1:实例 $filterfile = basename(PHP_SELF, '.php'); if (isset($_GET['uselastfilter']) && isse ...
- 讨论！MyBatis中利用package自动扫描包中的类，默认别名不只是首字母小写！
问题描述:这个问题我是在看书的时候碰到的.书上写着通过package标签扫描包中的类,将其第一个字母变为小写作为其别名.我在网上查了一些博主也是这么写的 但是!我发现,无论大小写,只要是类名就好,而且 ...
- Java https认证的坑
https单向认证的服务端证书不是权威机构颁发的,网上找了点代码不对https证书进行认证后,报如下异常 javax.net.ssl.SSLHandshakeException: Received f ...
- scrum 项目的基本模式
scrum 项目中有 3 个主要的角色:产品所有者, Scrum 主管和团队成员 产品所有者和团队其他成员一起工作,负责维护生产积压工作表 (production backlog) ,并对表中的项制定 ...
- 《JavaWeb从入门到改行》分页功能的实现
@目录 什么是分页 ? 两个子模块功能的问题分析 和 解决方案 有条件查和无条件查询的影响 和 解决方案 项目案例: mysql + commons-dbutils+itcast-tools+Base ...
- git杂记-远程仓库的使用
查看远程仓库:克隆自己的仓库,如不命名则默认远程仓库名字为origin: $ git clone https://github.com/OuFeng/JF_WEB.git Cloning into ' ...
- jQuery中判断input的disabled属性
<input type="text" id="ipt1" disabled> <input type="text" id= ...