1.过滤器可以使用一个管道字符(|)添加到表达式和指令中;

2.AngularJS过滤器可用于转换数据:

**currency:格式化数字为货币格式;

**filter:从数组项中选择一个子集;

**lowercase:格式化字符串为小写;

**orderBy:根据某个表达式排序数组;

**uppercase:格式化字符串为大写;

3.表达式中添加过滤器:过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中;

(1)uppercase过滤器将字符串格式化为大写:

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名:{{lastName | uppercase}}</p>

</div>

(2)lowercase过滤器将字符串格式化为小写:

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为:{{lastName | lowercase}}</p>

</div>

4.向指令添加过滤器:

(1)orderBy:根据表达式排列数组:

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

<ul>

  <li ng-repeat="x in name | orderBy:'country'">

    {{x.name+','+x.country}}

  </li>

</ul>

</div>

5.过滤输入:输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称;

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

<p><input type="text" ng-model="test"></p>

<ul>

  <li ng-repeat="x in name | filter:test | orderBy:'country'">

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

  </li>

</ul>

</div>

Angular JS 学习之过滤器的更多相关文章

  1. Angular.js之内置过滤器学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  3. Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  4. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  5. Angular JS学习之表达式

    1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bi ...

  6. Angular.js学习笔记(三)

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  7. angular.js学习的第一天

    第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...

  8. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  9. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

随机推荐

  1. Spring mvc中@RequestMapping 6个基本用法小结(转载)

    小结下spring mvc中的@RequestMapping的用法. 1)最基本的,方法级别上应用,例如: @RequestMapping(value="/departments" ...

  2. 自定义ToolBar之一

    其实已经有很多大神写过这方面的文章了,不过我比较蠢吧,老有一些地方看不懂的,翻了很多关于Toolbar方面的文章和视频,这儿总结一下.  参考资料:youtube:slidenerd 阶段一 自定义配 ...

  3. xcode7 免费真机调试

    原文链接:http://www.cnblogs.com/tandaxia/p/4839997.html 刚新安装了Xcode7 Version 7.1 beta , 据说这个版本可以免费真机调试,于是 ...

  4. web前端打印总结

    资料: http://blog.5ibc.net/p/39927.html 正文: 简单的说就是映入两个css文件 <link/> <link/> 每个css文件都有一个属性是 ...

  5. 如何激活webstorm 11

    以前使用webstorm 10,可以在网上搜个注册码进行激活.后来升级了webstorm 11,发现原来的注册码和注册机已经不能激活了.查询后,才知道WebStorm 11改变了注册方法,可以在Lic ...

  6. 数对的个数(cogs610)

    Description出题是一件痛苦的事情!题目看多了也有审美疲劳,于是我舍弃了大家所熟悉的A+B Problem,改用A-B了哈哈! 好吧,题目是这样的:给出一串数以及一个数字C,要求计算出所有A- ...

  7. Caffe初试(一)win7_64bit+VS2013+Opencv2.4.10+CUDA6.5配置Caffe环境

    折腾了几天,终于在windows系统上成功配置了Caffe环境,期间遇到了很多问题,每个问题的解决也都花了不少时间,查过挺多资料,感觉挺有意义,这里写篇博客记录一下. 原来我使用的CUDA版本是7.5 ...

  8. AFNetworking(AFN)总结

    AFNetworking(AFN) ----主要做下载上传之用 //他是干啥的?发送请求,主要做下载上传之用 (苹果自带有获取服务器数据的方法NSURLConnection send,AFNetwor ...

  9. 【转】C语言快速幂取模算法小结

    (转自:http://www.jb51.net/article/54947.htm) 本文实例汇总了C语言实现的快速幂取模算法,是比较常见的算法.分享给大家供大家参考之用.具体如下: 首先,所谓的快速 ...

  10. python如何一行输入多个值

    python2的raw_input以及python3的input获取的是整行的字符串.读进来后,字符串有着著名的split可以根据分隔符拆解成子串组成的list. 对于list内的对象,需要的采取转换 ...