文档章节

Angular js 学习之filter 过滤器

挨踢的小耗子
 挨踢的小耗子
发布于 2015/12/07 23:36
字数 302
阅读 10
收藏 0

     工作中用的angular js 前端开发,今天做了个filter 的功能,顺便总结下angular js 的过滤器的用法。

  • in Html template binding : 主要是在html 页面使用,具体用法如下

{{ filter_expression | filter : expression : comparator}}

该用法可以使用angular 内置的九种过滤器,分别为

{{num | currency : '¥'}}

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

{{ array | filter : 'a' }} //匹配属性值中含有a的,如果是对象数组的唯一匹配,最好用参数对象匹配,以防止出现
匹配不严密的情况
可以匹配数组,数组对象,返回匹配出的数组
{{objectArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的

{{ jsonTest | json}}
json过滤器可以把一个js对象格式化为json字符串,没有参数

{{ array| limitTo : 2 }}  //将会显示数组中的前两项

lowercase(小写),uppercase(大写),number(格式化数字),orderBy(排序)

  • in javascript:在js中

$filter('filter')(array, expression, comparator)

该用法主要在js 中使用,需要把filter 注入进来,以上9种内置都可使用。

  • 自定义filter

可以通过函数或其它定制自己的filter已达到程序的要求。添加待续

© 著作权归作者所有

共有 人打赏支持
上一篇: 火狐 --POST请求
挨踢的小耗子
粉丝 1
博文 3
码字总数 582
作品 0
朝阳
程序员
私信 提问
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
2018 年,Angular JS 框架是否还值得学习?

越来越多人对学习开发和搭建自己的网站感兴趣,如果你也是,那么 2018 年将是提高技能理想的一年。我们不妨先从 JavaScript 框架开始,但在这篇文章里谈论得更多的将是 Angular JS。 Angula...

局长
02/16
2.8K
6
$apply already in progress at Error

Search: Sort by: name age {{phone.name}} {{phone.snippet}} {{phone.age}} XMLHttpRequest cannot load file:///D:/ProgramFilesZhtt/tomcat1081/webapps/AngularJS/js/05.json. Cross or......

梦幻女侠
2013/10/11
1K
1
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
AngularJs学习笔记--I18n/L10n

一、I18n and L10n in AngularJS 1. 什么是I18n和L10n?   国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言、文化的本地化的方法的规范。本地化...

武文海
2015/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

eslint rules 规则

'rules': { "comma-dangle": ["error", "never"], //是否允许对象中出现结尾逗号 "no-cond-assign": 2, //条件语句的条件中不允许出现赋值运算符 "no-console": 2, //不允许出现console语句 ...

agenyun
23分钟前
1
0
类型判断时instanceof和equals的不同用法

接口设计时为了避免序列化的麻烦,将接口定义为参数为map<String,String>类型的接口,但是现在调用时需要转换当前的实体Bean为Map,接口接收方再把Map转换为另一个Bean实体。过程中的需要对类...

wangtx
30分钟前
1
0
vue 组件间传值(个人精编)

1.父组件向子组件传值 1⃣️.子组件标签绑定需要传递的参数名2⃣️.子组件页面使用props 接收参数 2.子组件向父组件传值  1⃣️.子组件使用$emit来触发一个自定义事件,并传递一个参...

MrBoyce
40分钟前
1
0
(荷兰)彼得·冯·门施著:博物馆学研究的目的

博物馆学研究的目的 (荷)彼得·冯·门施 尽管诸多关于博物馆学认知目的的不同看法可以被归纳为数个主要群体,但没有一个群体可以被称为“学派”。一般来说,学派是由于博物馆学研究目的的不...

乔老哥
49分钟前
2
0
Vue slot的用法

之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了,使用slot就是先圈一块地,将来...

peakedness丶
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部