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. ASM:《X86汇编语言-从实模式到保护模式》第10章:32位x86处理器的编程架构

    ★PART1:32位的x86处理器执行方式和架构 1. 寄存器的拓展(IA-32) 从80386开始,处理器内的寄存器从16位拓展到32位,命名其实就是在前面加上e(Extend)就好了,8个通用寄存 ...

  2. c# 类型拷贝

    /// <summary> /// 类 名:EntityHelper /// 类 说 明:实体操作方法类 /// : /// 创建时间:2013/8/12 /// </summary ...

  3. List,Set,Map用法以及区别

    List,Set,Map是否继承自Collection接口? 答:List,Set是,Map不是. 如图: Collection ├List │├LinkedList │├ArrayList │└Ve ...

  4. UVA 11827 Maximum GCD

    F - Maximum GCD Time Limit:1000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Given the ...

  5. ios cell展示可滑动的图片

    需求: 点击cell上的图片.图片以原图显示出来,可以放大或缩小.再次点击图片移除图片显示原来界面.(和QQ空间看图片类似) 点击图片实现效果: 1. 自定义一个 UITableView (KDIma ...

  6. google关于ssh key的解释(转)转的google的wiki的

    SSH keys (简体中文)     SSH 密钥对可以让您方便的登录到 SSH 服务器,而无需输入密码.由于您无需发送您的密码到网络中,SSH 密钥对被认为是更加安全的方式.再加上使用密码短语 ( ...

  7. Mac下java开发环境的搭建与开发工具的安装

    一.安装JDK 1.根据你当前环境的需要,下载相应的JDK并安装,安装步骤与其他Mac软件安装方法相同,我安装的是jdk1.8.0_74.jdk,mac中jdk1.8的默认位置:/Library/Ja ...

  8. printf 打印 unit32_t

    今天在网上找了老半天终于找到了:printf 打印 uint32_t 类型  uint32_t domainId; printf("\ndomainId=========%lu", ...

  9. 关于Linux环境变量

    查看全局变量:  printenv 查看单个环境变量的值可以用echo命令,必须在环境变量的名称前放一个$符号 如:

  10. 1.Windows安装PostgreSQL

    按照下面的步骤,Windows机器上安装PostgreSQL.请确保已开启第三方防病毒,同时安装. 挑选你想要的PostgreSQL的版本号,可以点击以下链接下载 EnterpriseDB Windo ...