文档章节

Angular js 学习之filter 过滤器

挨踢的小耗子
 挨踢的小耗子
发布于 2015/12/07 23:36
字数 302
阅读 9
收藏 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已达到程序的要求。添加待续

© 著作权归作者所有

共有 人打赏支持
挨踢的小耗子
粉丝 1
博文 3
码字总数 582
作品 0
朝阳
程序员
AngularJs学习笔记--expression

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

武文海
2015/02/06
0
0
AngularJs学习笔记--I18n/L10n

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

武文海
2015/02/06
0
0
Angular.js 相关记录

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

彭博
2014/04/25
0
2
5个示例带你学习AngularJS

本文由 伯乐在线 - 蝈蝈 翻译自 tutorialzine。欢迎加入技术翻译小组。转载请参见文章末尾处的要求。 直到现在,你或许已经听说过AngularJS了,一个改变你对web应用思考方式,由谷歌开发的令...

冬瓜1
2013/12/30
0
0
angular.js,backbone.js,ember.js区别

1 backbone. 对于初学者来说,我非常建议首先学习backbone 而不是jQuery. 因为jQuery提供的功能是操作DOM和Ajax数据传输. 而Backbone的功能和目的仅仅是提供一个javascript的MVC 实际针对Web...

造化玉碟
2014/04/05
0
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

windbg学习记录

我开始熟练使用windbg是从帮助手册开始的,也就是.hh命令。 就像学习windows开发从msdn开始一样,微软的产品虽然不开源,但是文档做的是相当的好。然而那些开源的东西呢?开源的竞争力其实就...

simpower
6分钟前
0
0
学习scala的网站汇总

https://www.codacy.com/blog/how-to-learn-scala/

Littlebox
8分钟前
0
0
配置本地的cloud9开发环境

前言 说到(前端)在线IDE开发环境,cloud9是不能绕过的,cloud9支持很多语言,默认支持的就有Node.js,Python,Ruby,PHP,Go,更逆天的是,他还支持数据库,包括MySQL,MongoDB,Redis,S...

Kefy
12分钟前
0
0
springcloud应用程序上下文层次结构

如果您从SpringApplication或SpringApplicationBuilder构建应用程序上下文,则将Bootstrap上下文添加为该上下文的父级。这是一个Spring的功能,即子上下文从其父进程继承属性源和配置文件,因...

itcloud
17分钟前
0
0
新程序员最爱的免费资源

简评:国外美女程序员推荐了她自己用过的一些免费资源,对新手比较友好的那种。 原作者 Ali Spittel,是个美女程序员,以下这些资源都是她自己试过的。以下「我」代表 Ali Spittel。 学 HTML...

极光推送
20分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部