Angular - - filter 过滤器
Filter
Ng里的过滤器。
currency:把一个数字格式化成货币模式(如$1,234.56)。当没有提供任何货币符号时,默认使用当前区域的符号。
使用:
HTML:{{ currency_expression | currency:symbol:fractionSize}}
JS:$filter(“currency”)(amount,symbol,fractionSize);
amount:数值,过滤的值。
symbol:字符串,要显示的货币符号或标识符。
fractionSize:数值,整数的小数位数,默认为当前的最大位数。
date:基于需要的格式将时间格式化成字符串。
使用:
HTML:{{date_expression | date:format:timezone}}
JS:$filter(“date”)(date,format,timezone);
date:格式化为日期的日期对象。如果没有指定输入的时区字符串,时间则是当地时间。
format:格式规则/格式。
timezone:时区。
filter:从数组中选出一个子集,并将其作为一个新数组返回。
使用:
HTML:{{filter_expression | filter:expression:comparator}}
JS:$filter(“filter”)(array,expression,comparator);
array:被过滤的数组。
expression:字符串/对象/函数,用于从数组中选择数据的判断表达式。使用$可以匹配任何字段。
comparator:函数/Boolean/undefined,用于确定预期的值(从filter表达式返回)和实际的值(数组中的对象)进行比较,应视为匹配。function(actual,expected);
json:允许将一个javascript对象转换为json字符串。
使用:
HTML:{{json_expression | json:spacing}}
JS:$filter(“json”)(object,spacing);
object:过滤的对象。
spacing:每个缩进的空格数,默认为2。
limitTo:创建一个只包含指定数目元素的数组或字符串。元素是按指定的值和符号(+或-)从数组、字符串或数字的开头或结尾获取的。如果输入一个数字,则转换为字符串。
使用:
HTML:{{limitTo_expression | limitTo:limit:begin}}
JS:$filter(“limitTo”)(input,limit,begin);
input:限制的数组,字符串,数字。
limit:限制的长度。
begin:限制长度开始的位置(根据索引)。
lowercase:将字符串转换为小写。
使用:
HTML:{{lowercase_expression | lowercase}}
JS:$filter(“lowercase”)(input);
Input:过滤的字符串。
number:将数值转换为文本。
如果输入是null或undefined,那么其将被返回。如果输入的是无穷(正无穷/负无穷),将会返回无穷大的符号“∞”。如果输入不是一个数字,返回一个空字符串。
使用:
HTML:{{number_expression | number:fractionSize}}
JS:$filter(“number”)(number,fractionSize);
number:转换的数值。
fractionSize:数值,整数的小数位数,默认为当前的最大位数。在默认的区域设置的情况下这个数值是3。
orderBy:通过判断表达式将指定的数组进行排序。它是按字符串的字母顺序和数值的数字排序的。
注意:如果你发现数字没有按预期排序,请确保它们实际上是被保存为数字而不是字符串。
使用:
HTML:{{orderBy_expression | orderBy:expression:reverse}}
JS:$filter(“orderBy”)(array,expression,reverse);
array:排序的数组。
expression:字符串/函数/数组,用来确定元素顺序的表达式。
reverse:boolean,颠倒数组的顺序。默认为false。
uppercase:将字符串转换为大写。
使用:
HTML:{{uppercase_expression |uppercase}}
JS:$filter(“uppercase”)(input);
Input:过滤的字符串。
自带filter使用代码:
<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<!-- HTML: {{ctrl.currencyValue | currency:"USD$":1}} -->
{{ctrl.currencyValue}}
<!-- HTML: {{ctrl.dateValue | date:"yyyy-MM-dd"}} -->
{{ctrl.dateValue}}
<!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:'2')">{{i}}</div> -->
<div ng-repeat="i in ctrl.newArr">{{i}}</div>
<!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:{check:true})">{{i}}</div> -->
<div ng-repeat="i in ctrl._newArr">{{i}}</div>
{{ctrl.obj | json}}
<!-- HTML: <div ng-repeat="i in ctrl.arr | limitTo:3:2">{{i}}</div> -->
<div ng-repeat="i in ctrl.secondNewArr">{{i}}</div>
<!-- HTML: {{ctrl.str | lowercase}} -->
{{ctrl.str}}
<!-- HTML: <div ng-repeat="i in ctrl.arr | orderBy:'name':true">{{i}}</div> -->
<div ng-repeat="i in ctrl.thirdNewArr">{{i}}</div>
<!-- HTML: {{ctrl.str | uppercase}} -->
{{ctrl.newStr}}
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", ["$filter",testCtrl]);
function testCtrl($filter) {
var vm = this;
vm.currencyValue = 1234.56;
vm.currencyValue = $filter("currency")(vm.currencyValue,"USD$",1);
vm.dateValue = new Date();
vm.dateValue = $filter("date")(vm.dateValue,"yyyy-MM-dd");
vm.arr = [{name:'John', phone:'555-1276',check:true},
{name:'Mary', phone:'800-BIG-MARY',check:false},
{name:'Mike', phone:'555-4321',check:true},
{name:'Adam', phone:'555-5678',check:true},
{name:'Julie', phone:'555-8765',check:false},
{name:'Juliette', phone:'555-5678',check:true}];
vm.newArr = $filter("filter")(vm.arr,"2");
vm._newArr = $filter("filter")(vm.arr,{check:true});
vm.obj = {"name":"beast","age":21};
vm.secondNewArr = $filter("limitTo")(vm.arr,3,2);
vm.str = "Hello World";
vm.str = $filter("lowercase")(vm.str);
vm.thirdNewArr = $filter("orderBy")(vm.arr,"name",true);
vm.newStr = $filter("uppercase")(vm.str);
};
}());
自定义filter
基本代码:
angular.module(“x”,[]).filter(“filterName”,[“dependancy”,function(dependancy){
return function(value){
//your code return the data which passed filter(返回过滤后的数据)
};
}]);
filterName:过滤器名称。
dependency:注入的服务。
value:需要过滤的数据。
自定义filter使用代码:
<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<div ng-repeat="i in newArr=(ctrl.arr | myFilter)">
{{i.value}}
</div>
</div>
(function () {
angular.module("Demo", [])
.filter("myFilter",myFilter)
.controller("testCtrl", ["$filter",testCtrl]);
function myFilter(){
return function(value){
var arr = [];
angular.forEach(value,function(item,index){
if(item.value.indexOf("this")>=0){
arr.push(item);
}
});
return arr;
}
};
function testCtrl($filter) {
var vm = this;
vm.arr = [{"value":"this is a."},{"value":"that is b."},{"value":"this is c."},{"value":"that is a."}];
};
}());
这里对数组arr进行过滤,把数组中对象value属性的值含有”this“文本的对象都放进个新数组并返回该数组
Angular - - filter 过滤器的更多相关文章
- angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- filter 过滤器从数组中选择一个子集
输入过滤器可以通过一个管道字符和一个过滤器添加到指令中,该过滤器后面跟着一个冒号:冒号后面是一个模型名称. <!DOCTYPE html><html><head>& ...
- 转载 angularJS filter 过滤器
angularjs中的filter(过滤器) 标签: angularjsfilter 源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/ f ...
- filter 过滤器(监听)
Filter 过滤器 1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, ...
- Java防止SQL注入2(通过filter过滤器功能进行拦截)
首先说明一点,这个过滤器拦截其实是不靠谱的,比如说我的一篇文章是介绍sql注入的,或者评论的内容是有关sql的,那会过滤掉:且如果每个页面都经过这个过滤器,那么效率也是非常低的. 如果是要SQL注入拦 ...
- Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- javaweb学习总结(四十二)——Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- Filter过滤器简单应用( 接口访问控制 )
一.描述 在提供安卓.IOS客户端接口时,可以在登陆接口分配Session给客户端,用于判断其他接口是否是合法访问,以避免将所有的接口都暴露在web中可以由路径直接访问.但是最近的一个项目中的移动接口 ...
- 如何配置Filter过滤器处理JSP中文乱码
参考Tomcat服务器目录webapps的examples示例 简单配置步骤:1.在项目web.xml文件添加过滤器标记<filter>和<filter-mapping>:2. ...
随机推荐
- js 切换图片
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- Java调用本地接口
先从一个经典例子说起,Java如何调用本地接口. 步骤如下: 1.创建HelloWorld.java class HelloWorld { static{ System.loadLibrary(&qu ...
- mutilple output reduce cannot write
package org.lukey.hadoop.classifyBayes; import java.io.BufferedReader; import java.io.IOException; i ...
- mac版MyEclipse的安装及创建web项目
这两天快被MyEclipse整死了,因为电脑是mac系统的,安装MyEclipse mac破解版时一直是不成功,弄了一天多才行,接着创建web项目HttpServlet在Tomcat发布时总是出现40 ...
- Mysql 中文乱码问题完美解决方案
MySQL会出现中文乱码的原因不外乎下列几点: 1.server本身设定问题,例如还停留在latin1 2.table的语系设定问题(包含character与collation) 3.客户端程式(例如 ...
- opencart配置
1.安装opencart 2.修改后台目录(慎重,修改后插件安装会出错) Opencart默认的后台是网站/admin这样子,很多人可以猜到这种组合对于正式生产环境很不安全,我们可以把这个admin改 ...
- 多文件上传插件Stream,是Uploadify的Flash版和Html5版的结合,带进度条,并支持html5断点续传(附件上传),拖拽等功能
是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Firefox, Safari, 其他) ...
- openstack controller ha测试环境搭建记录(六)——配置keystone
在所有节点的hosts文件添加:10.0.0.10 myvip 在所有节点安装# yum install -y openstack-keystone python-keystoneclient# yu ...
- HUST 1601 Shepherd
间隔小的时候dp预处理,大的时候暴力..正确做法不会... dp[i][j]表示以i为开头,间隔为j的和,递推:dp[i][j] = dp[i + j][j] + a[i] 测试数据中间隔可能是0.. ...
- P4语言编程快速开始 实践二
参考:P4语言编程快速开始 上一篇系列博客:P4语言编程快速开始 实践二 Demo 2 本Demo所做的修改及实现的功能: 为simple_router添加一个计数器(counter),该计数器附加( ...