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. Greedy:Bound Found(POJ 2566)

       神奇密码 题目大意:就是给你一个数组,要你找出连续的数的绝对值的和最接近t的那一串,并且要找出数组的上界和下界的下标,并显示他们的和 因为这一题的数有正有负,所以必须要先把和求出来,然后排序,然 ...

  2. code vs1436 孪生素数 2(数论+素数的判定)

    1436 孪生素数 2  时间限制: 2 s  空间限制: 1000 KB  题目等级 : 白银 Silver 题解  查看运行结果     题目描述 Description 如m=100,n=6 则 ...

  3. .Net的DataGrid的使用

    先上图吧

  4. java课后作业5

    [问题]随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路: 1.申请一个长度为10的数组 2.计算机随机生成10个数,并赋给数组 3. ...

  5. 苹果的软件/系统盘 网站 http://www.panduoduo.net/u/bd-369186934/2

    http://www.panduoduo.net/u/bd-369186934/2

  6. 手工加载DLL

    1.为了能找到dll的函数地址,生成dll时需要将其中的函数声明为C函数(extern "C"): #ifndef __MYDLL_H#define __MYDLL_H #ifde ...

  7. C#调用C++DLL的小总结5---和C++的DLL的联合调试

    http://fpcfjf.blog.163.com/blog/static/5546979320134922938373/ http://blog.csdn.net/jiangxinyu/artic ...

  8. @ifconfig eth0|awk -F "[ :]+" 'NR==2{print $4 "/" $NF}'中"[ :]+" 是什么意思?@

    http://blog.csdn.net/zhuying_linux/article/details/6822987

  9. Snowflake Snow Snowflakes(哈希表的应用)

    Snowflake Snow Snowflakes Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 27312   Accep ...

  10. win7Java开发环境配置

    win7下Java开发环境的配置 首先下载符合操作系统版本的jdk,比如最新的jdk8: 下载链接:http://www.oracle.com/technetwork/java/javase/down ...