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) {
this.currencyValue = 1234.56;
this.currencyValue = $filter("currency")(this.currencyValue,"USD$",1);
this.dateValue = new Date();
this.dateValue = $filter("date")(this.dateValue,"yyyy-MM-dd");
this.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}];
this.newArr = $filter("filter")(this.arr,"2");
this._newArr = $filter("filter")(this.arr,{check:true});
this.obj = {"name":"beast","age":21};
this.secondNewArr = $filter("limitTo")(this.arr,3,2);
this.str = "Hello World";
this.str = $filter("lowercase")(this.str);
this.thirdNewArr = $filter("orderBy")(this.arr,"name",true);
this.newStr = $filter("uppercase")(this.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) {
this.arr = [{"value":"this is a."},{"value":"that is b."},{"value":"this is c."},{"value":"that is a."}];
};
}());

这里对数组arr进行过滤,把数组中对象value属性的值含有”this“文本的对象都放进个新数组并返回该数组。

关于自定义filter中为什么执行两次的问题请参考:Stack Overflow

AngularJs filter 过滤器的更多相关文章

  1. 转载 angularJS filter 过滤器

    angularjs中的filter(过滤器) 标签: angularjsfilter   源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/ f ...

  2. AngularJs filter 过滤器基础【转】

    Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...

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

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

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

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

  5. angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

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

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

  7. AngularJS之过滤器

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

  8. angularJS的过滤器!

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

  9. AngularJS filter:search 是如何匹配的 ng-repeat filter:search ,filter:{$:search},只取repeat的item的value 不含label

    1.  filter可以接收参数,参数用 : 进行分割,如下: {{ expression | filter:argument1:argument2:... }} 2.   filter参数是 对象 ...

随机推荐

  1. WPF ListView和ListBox等双击事件问题

    上两篇文章中说双击行获取不到当前数据对象问题, http://www.cnblogs.com/ligl/p/5636899.html http://www.cnblogs.com/ligl/p/562 ...

  2. GridView的 OnRowDataBound 事件用法

    <asp:GridView ID="RptUsers" runat="server" AutoGenerateColumns="False&qu ...

  3. error_reporting()

    定义和用法 error_reporting() 设置 PHP 的报错级别并返回当前级别. 语法 error_reporting(report_level) 如果参数 level 未指定,当前报错级别将 ...

  4. asp.net mvc输出自定义404等错误页面,非302跳转。

    朋友问到一个问题,如何输出自定义错误页面,不使用302跳转.当前页面地址不能改变. 还要执行一些代码等,生成一些错误信息,方便用户提交反馈. 500错误,mvc框架已经有现成解决方法: filters ...

  5. iOS开发--QQ音乐练习,旋转动画的实现,音乐工具类的封装,定时器的使用技巧,SliderBar的事件处理

    一.旋转动画的实现 二.音乐工具类的封装 -- 返回所有歌曲,返回当前播放歌曲,设置当前播放歌曲,返回下一首歌曲,返回上一首歌曲方法的实现 头文件 .m文件 #import "ChaosMu ...

  6. mysql查询时间戳和日期的转换

    mysql提供了两个函数: from_unixtime(time_stamp) -> 将时间戳转换为日期 unix_timestamp(date) -> 将指定的日期或者日期字符串转换为时 ...

  7. Eclipse设置不格式化注释

    Eclipse设置不格式化注释 注释中写点带格式的文字,format后全乱了,解决办法如下: Windows -> Preferces -> java -> Code Style - ...

  8. mysql-函数if多值多结果判断

    if语句 案例:同样统计男女生人数,语句如下: ,)) 男生数,,)) 女生数, ,,)) pass1,,,)) pass0, ,,)) state1,,,)) state0 FROM sch GRO ...

  9. maven打包忽略测试用例

    忽略单元测试失败: $ mvn test -Dmaven.test.failure.ignore=true 跳过单元测试: mvn install -Dmaven.test.skip=true 跳过测 ...

  10. extract()函数

    extract(),它的主要作用是将数组展开,键名作为变量名,元素值为变量值 extract($_POST);//相当于$username = $_POST['username'];//$passwo ...