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. webclient 和httpclient 应用

    //webclient应用 MyImageServerEntities db = new MyImageServerEntities(); public ActionResult Index() { ...

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

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

  3. 定时器(NSTimer)

    iOS中定时器NSTimer的使用 1.初始化 + (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget sel ...

  4. 解药还是毒药(codevs 2594)

    2594 解药还是毒药  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description Smart研制出对 ...

  5. lsof

    lsof `which httpd` //那个进程在使用apache的可执行文件 lsof /etc/passwd //那个进程在占用/etc/passwd lsof /dev/hda6 //那个进程 ...

  6. php 投票系统练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 从数据库导出数为生成excel表

    mysql -umaster -hxx.xx.xx.xx -p -e "set names utf8; use xxxdb;select * from t_order where t_ord ...

  8. HTML5 – 4.canvas

    1.绘制矩形 2.绘制圆形 3.绘制文字 4.保存文件 什么是 Canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. < ...

  9. HDU5558 Alice's Classified Message(合肥区域赛 后缀数组)

    当初合肥区域赛的题(现场赛改了数据范围就暴力过了),可惜当初后缀数组算法的名字都没听过,现在重做下. i从1到n - 1,每次枚举rank[i]附近的排名,并记录当起点小于i时的LCP(rank[i] ...

  10. HDU1899 Sum the K-th's(树状数组)

    枚举,每次增加点,删除点 #include<cstdio> #include<iostream> #include<cstdlib> #include<cst ...