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. 【Excel 4.0 函数】REGISTER 的两种形式以及VBA等效语句

    形式1 REGISTER("SAMPLE.DLL", "MyFunction", "AIC") 形式1等效 VBA语句 Declare Fu ...

  2. MyBatis之CRUD

    1 mybatis框架介绍 1.1回顾jdbc操作数据库的过程 1.2 mybatis开发步骤 A.提供一个SqlMapperConfig.xml(src目录下),该文件主要配置数据库连接,事务,二级 ...

  3. hosts文件修改之后立刻刷新

    最近因为项目的需要,总是修改hosts文件,每次修改之后都要重启浏览器,总结下刷新的方式 window下,hosts文件位置:C:\windows\system32\drivers\etc\hosts ...

  4. 解决客户端访问https报错

    现象: javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure at com.sun.net.ssl. ...

  5. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  6. JS返回上一页

    <button  onclick="javascript:history.go(-1);">返回上一页</button> <button  oncli ...

  7. android中点击空白处隐藏软键盘

    InputMethodManager manager manager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERV ...

  8. 图文转换——NABCD

    我们小组要做的是一款可以对文字进行扫描转为txt格式将文字保存下来的移动通信终端的APP. N-need    生活中经常遇到这种问题,看到报纸上的一篇文章,特别想收藏这篇文章,或者是在网上看到一篇好 ...

  9. php的错误级别

    error_reporting() 用于设置 PHP 的报错级别并返回当前级别.(PHP 4, PHP 5) 函数能够在运行时设置 error_reporting 指令. PHP 有诸多错误级别,使用 ...

  10. Delphi面向对象的方法

    方法是属于一个给定对象的过程和函数,方法反映的是对象的行为而不是数据,前一篇提到的对象的两个重要的方法:构造方法和析构方法. 为了使对象能执行各种功能,你能在对象中定制方法 创建一个方法用两个步骤,首 ...