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 ...
随机推荐
- Rest分享
分享提纲引言:微服务, 漂亮小姑娘,帅气小伙 这老头是个奇人,特别擅长抽象归纳和制造概念.特别是微服务这种新生的名词,都有一个特点:一解释就懂,一问就不知,一讨论就打架. REST是什么,是一个模式, ...
- [转]Android Studio SQLite Database Multiple Tables Example
本文转自:http://instinctcoder.com/android-studio-sqlite-database-multiple-tables-example/ BY TAN WOON HO ...
- RabbitMQ---3、c#实现
1.EasyNetQ组件的使用 EasyNetQ组件的使用方式比较简单,跟很多组件都类似,例如:建立连接,进行操作做等等,对于EasyNetQ组件也是如此.(mq的升级,用于简化rabbitmq应用代 ...
- C# System.Timers.Timers的用法在工控设备上位中的用法
这两天写设备的上位,由于要读取服务器上的数据库,通过WEBSERVICE访问数据库,我具体的做法是: 1.专门用Timer起线程执行,由于在用的时候报错,不能访问其他线程资源的错误,因此我用了委托的方 ...
- 【转载】2012年七个免费ASP空间分享-支持ASP、ASP.NET的空间
文章目录 Azure空间 Appharbor 7host空间 Brinkster Jabry空间 总结后的话 这篇免费ASP空间的总结文章本来标题已经拟好了是:2012年十大免费ASP空间分享,但是当 ...
- .net core 导出excel
1.使用NuGet 安装 EPPlus.Core, 2.代码如下 using OfficeOpenXml; using OfficeOpenXml.Style; public IActionResul ...
- InfluxDB 的卸载与重装
我是通过下面方式安装的,所以卸载也是用的 rpm 的卸载命令 wget http://s3.amazonaws.com/influxdb/influxdb-latest-1.x86_64.rpm su ...
- BZOJ P4720[Noip2016]换教室____solution
题目太长不表 <--无形传送,最为致命 学习一点数学期望的基础,预处理最短路,然后加上DP即可.(废话) 理解决策和结果的差别: 在这里每阶段的决策有两个:申请|不申请 结果有两个:换|不换 然 ...
- 如何从只会 C++ 语法的水平到达完成项目编写软件的水平？
原文:https://www.zhihu.com/question/29702729 学习 C++ 有一段时间了,但只是停留在熟悉语法阶段,在看 C++primer,不过感觉这本书比较深奥,不太适合, ...
- IOS CALayer的属性和使用
一.CALayer的常用属性 1.@propertyCGPoint position; 图层中心点的位置,类似与UIView的center:用来设置CALayer在父层中的位置:以父层的左上角为原点( ...