Angular.Js中过滤器filter与自定义过滤器filter实例详解

本文主要给大家介绍了Angular.Js过滤器filter与自定义过滤器filter的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

一、AngularJS的filter过滤器:

  • uppercase|lowercase:大小写转换过滤
  • json:json格式过滤
  • date:日期格式过滤
  • number:数字格式过滤
  • currency:货币格式过滤
  • filter:查找
  • limitTo:字符串对象截取
  • orderBy:对象排序



 
 Angular基础


将字符串转换为大小写:

姓名为 {{ person.lastName | uppercase }}

姓名为 {{ person.lastName | lowercase }}

货币过滤:

数量: 价格:

总价 = {{ (quantity * price) | currency }}

{{250 |currency:"RMB ¥"}}

按国家的字母顺序排序对象:

循环对象:

  • {{ x.name + ', ' + x.country }}
{{jsonText | json}}
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}
{{1.2345678 |number:1}}
{{ "i love tank" | limitTo:6 }}
{{ "i love tank" | limitTo:-6 }}
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }}
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }}

按输入的字母显示对象:

输入过滤:

  • {{ (x.name | uppercase) + ', ' + x.country }}

name筛选:

  • {{ (x.name | uppercase) + ', ' + x.country }}
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'sunm'} }}

Angular.Js中过滤器filter与自定义过滤器filter实例详解

二、AngularJs的控制器使用filter




 
 Angular基础


{{uFirstName}}
{{cPrice}}

三、AngularJs自定义filter过滤器




 
 Angular基础


{{welcome | replaceHello}}
{{welcome | replaceHello:3:5}}
{{welcome | rJs}}
var appFilter=angular.module('myApp.filter',[]);
//自定义过滤器
appFilter.filter('rJs',function(){
 return function(input,n1,n2){
  console.log(input);
  console.log(n1);
  console.log(n2);
  return input.replace(/Js/,' javaScript');
 }
}); 

Angular.Js中过滤器filter与自定义过滤器filter实例详解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

时间: 2017-05-06

详解Angular的内置过滤器和自定义过滤器【推荐】

在实际的开发过程中,很多後端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理.首先我们看看在视图中是如何使用过滤器的. 1.currency(货币)格式化

{{name | currency:'¥'}}

Angularjs 依赖压缩及自定义过滤器写法

具体365bet体育在线官网_365体育投注平台_365在线体育消息如下所示:

简述angular自定义过滤器在页面和控制器中的使用

AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参数1,参数2,...){ return Obj; //这里返

详解AngularJS中自定义过滤器

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

详解AngularJS中$filter过滤器使用(自定义过滤器)

1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js365bet体育在线官网_365体育投注平台_365在线体育消息中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

AngularJS 自定义过滤器详解及实例365bet体育在线官网_365体育投注平台_365在线体育消息

AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 实现方式 下面看一下如何定义声明一个过滤器,首先依然是要创建我们自己的模块myAppModule var myAppModule=agular.module("myApp",[]); 接下来在模块的基础上,创建过滤器: myAppModule.fil

使用AngularJS创建自定义的过滤器的方法

Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): 我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数. 这是一个将会用到的样本输入: $scope.friends = [{name:'John', phone:'555-1276'}, {name:'Annie', phone:'800-BIG-MARY'}, {na

AngularJS创建自定义指令的方法详解

本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

在Django框架中自定义模板过滤器的方法

自定义过滤器就是有一个或两个参数的Python函数: (输入)变量的值 参数的值, 可以是默认值或者完全留空 例如,在过滤器 {{ var|foo:"bar" }} 中 ,过滤器 foo 会被传入变量 var 和默认参数 bar. 过滤器函数应该总有返回值. 而且不能触发异常,它们都应该静静地失败. 如果出现错误,应该返回一个原始输入或者空字符串,这会更有意义. 这里是一些定义过滤器的例子: def cut(value, arg): "Removes all values o

Zend Framework实现自定义过滤器的方法

本文实例讲述了Zend Framework实现自定义过滤器的方法.分享给大家供大家参考,具体如下: 创建自定义的过滤器 365bet体育在线官网_365体育投注平台_365在线体育消息:

C#通过反射创建自定义泛型

本文以实例形式讲述了C#通过反射创建自定义泛型的实现方法,分享给大家供大家参考.具体如下: 比如有这样一个泛型:Demo.GenericsSimple 我想要通过反射创建一个Demo.GenericsSimple的实例可以通过下面的格式进行创建: System.Reflection.Assembly.GetExecutingAssembly().CreateInstance("命名空间.User`形参数量N[[1形参类型全名,形参类型所

AngularJS基于factory创建自定义服务的方法详解

本文实例讲述了AngularJS基于factory创建自定义服务的方法.分享给大家供大家参考,具体如下: 为什么要创建自定义服务? 很简单,不想让控制器显得过于"臃肿",而且服务可复用.针对性强,每个服务对应不同的功能. 这里介绍如何使用factory创建自定义服务,并且使用他. 例子1:

AngularJS实现自定义指令与控制器数据交互的方法示例

本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: AngularJS自定义指令与控制器数据交互