标签: angularjsfilter
 

源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/

filters可以用来格式化数据。例如把时间格式化成为yyyy-MM-dd的形式来呈现给用户,方便查看。AngularJS内置了一些filters,我们也可以根据自己的需要自定义一些filters.

下面是angularjs提供的filters:

currency:格式化一个数字成为一种货币。当没有提供任何货币符号时,使用当前区域的默认符号。

number:格式化数字成为文本

filter:从数组中选择一个子集,并将其返回为一个新数组

date:基于要求的格式格式化日期为字符串

json:允许你将一个JavaScript对象转化为JSON字符串

lowercase:转换字符串成为小写

uppercase:转换字符串成为大写

limitTo:将数组/字符串限定为一个指定的元素/字符数。

orderBy:通过给定的表达式指定数组,它是按字母顺序排列的字符串和数值。

用法介绍:

html中用法:

filter可以用管道符 | 添加到表达式:{{expression | filter}}

也可以多个filter连用,上一个filter的输出作为下一个filter的输出:

{{expression | filter1 | filter2 |……}}

还可以在指令中用参数:

例如: <li ng-repeat=“x in names | orderBy:’country’”>

或<li ng-repeat=“x in names | filter : ‘i’>

javascript中用法:

例:$scope.formatDate = $filter('date')(today, 'yyyy-MM-dd');

{{事件戳  | data:"yyyy-mm-dd"}}   格式化为  年月日 格式

有时候angularjs内置的filter不够用,我们就可以自己定义一个过滤器。

例如定义一个名为“myFormat”的过滤器,

<ul ng-app="myApp"ng-controller="namesCtrl">

<li ng-repeat="x in names">

{{x | myFormat}}

</li>

</ul>

<script>

var app = angular.module('myApp', []);

app.filter('myFormat', function() {

returnfunction(x) {

var i, c, txt = "";

x = x.split("")

for (i = 0; i < x.length; i++) {

c = x[i];

if (i % 2 == 0) {

c = c.toUpperCase();

}

txt += c;

}

return txt;

};

});

app.controller('namesCtrl', function($scope) {

$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit','Mary', 'Kai'];

});

</script>

这个myFormat过滤器将会格式化其它奇数位的字符为大写。

转载 angularJS filter 过滤器的更多相关文章

  1. AngularJs filter 过滤器

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

  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:过滤器

    ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...

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

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

  8. 转:java使用Filter过滤器对Response返回值进行修改

    练习时只做了对request 的处理,这里记录一下,filter 对 response的处理. 原文地址:java使用Filter过滤器对Response返回值进行修改 有时候在开发过程中会有这样一个 ...

  9. AngularJS之过滤器

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

随机推荐

  1. 灵魂画师,在线科普多云平台/CMP云管平台/中间件/虚拟化/容器是个啥

    原创: 灵魂工作室 速石科技 经常碰到有人问: 你们是云管吗? 你们和CMP多云管理平台有什么区别? 你们这个多云平台到底是个啥? emmmmm,问题还挺不好回答. 为了说清楚这些问题,但又不希望你们 ...

  2. 对Java中可变参数的理解

    说明 可变参数:是DK1.5之后出现的新特性,其实可变参数是0.1.2.3.....个参数的数组 使用前提 当方法的参数列表数据类型已经确定,但是参数的个数不确定,就可以使用可变参数 使用格式 修饰符 ...

  3. Flutter使用SingleTickerProviderStateMixin报错

    最近在学习开发Flutter应用项目,在创建tabbar和tabview后,进行网络请求后显示顶部tab标签,设置TabController,并使class类实现SingleTickerProvide ...

  4. fill 的用法

    博客 : http://blog.csdn.net/liuchuo/article/details/52296646 fill函数的作用是:将一个区间的元素都赋予val值.函数参数:fill(vec. ...

  5. MongoDB数据库备份和恢复

    1.数据库备份 mogodbdump -h dbhost -d dbname -o dbdirectory -h: 服务器地址,也可以指定端口号 -d: 需要备份的数据库的名称 -o: 备份的数据库存 ...

  6. redis 支持事务

    pipe = conn.pipeline(transaction=True) pipe.multi() pipe.set(') pipe.hset('k3','n1',666) pipe.lpush( ...

  7. css 透明度

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  8. kuangbin专题专题十一 网络流 POJ 1087 A Plug for UNIX

    题目链接:https://vjudge.net/problem/POJ-1087 题目:有n个插座,插座上只有一个插孔,有m个用电器,每个用电器都有插头,它们的插头可以一样, 有k个插孔转化器, a ...

  9. 个人第四次作业——Alpha项目测试

    一.格式描述 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要求在哪里 https: ...

  10. 爬虫之pyspider 安装

    解决方法: 利用wheel安装 S1: pip install wheelS2: 进入www.lfd.uci.edu/~gohlke/pythonlibs/,Ctrl + F查找pycurl S3:这 ...