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 ...
随机推荐
- IOS Core Image之二
在上篇博客IOS Core Image之一中了解了下CIImage.CIFilter.CIContext三个类的使用,这篇了解下滤镜链(多滤镜)和人脸检测(不是人脸识别). 一.多滤镜 1.有些效果不 ...
- [转]asp.net权限认证：摘要认证(digest authentication)
本文转自:http://www.cnblogs.com/lanxiaoke/p/6357501.html 摘要认证简单介绍 摘要认证是对基本认证的改进,即是用摘要代替账户密码,从而防止明文传输中账户密 ...
- ef——存储过程
数据库中存在存储过程GetCategory: ALTER proc [dbo].[GetCategory] @cid int as begin select * from Categories w ...
- 文件夹操作之判断是否存在（Directory）
Directory类用于操作文件夹,用于创建.移动和枚举目录和子目录的静态方法.DirectoryInfo类用于典型操作,如复制,移动,重命名,创建和删除目录.他们都可用于获取和设置相关属性或有关创建 ...
- Details.cshtml(118): error CS1001: 应输入标识符
写了没定义 @Html.DisplayFor(model => model.)
- 对自写的Asp.Net分页控件的应用方式(异步无刷新分页)
前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
- [javaEE] Servlet中Session的使用
Session是一个域 作用范围:当前会话范围 生命周期:当程序第一次调用request.getSession()创建出客户端的session对象,30分钟没有操作认为超时,这个可以在web.xml中 ...
- PHP高级工程师面试 - 笔试题
Part1:HTTP协议 1.状态码的含义 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求 ...
- docker 卸载
1首先搜索已经安装的docker 安装包 [root@localhost ~]# yum list installed|grep docker 或者使用该命令 [root@localhost ~]# ...
- csharp: Microsoft SqlHelper
from: Microsoft Data Access Application Block for .NET https://www.microsoft.com/en-us/download/con ...