Angular JS 学习之过滤器
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 学习之过滤器的更多相关文章
- Angular.js之内置过滤器学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 适合我胃口的angular.js学习资料
断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- Angular JS学习之表达式
1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bi ...
- Angular.js学习笔记(三)
一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...
- angular.js学习的第一天
第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
随机推荐
- Greedy:Bound Found(POJ 2566)
神奇密码 题目大意:就是给你一个数组,要你找出连续的数的绝对值的和最接近t的那一串,并且要找出数组的上界和下界的下标,并显示他们的和 因为这一题的数有正有负,所以必须要先把和求出来,然后排序,然 ...
- code vs1436 孪生素数 2(数论+素数的判定)
1436 孪生素数 2 时间限制: 2 s 空间限制: 1000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 Description 如m=100,n=6 则 ...
- .Net的DataGrid的使用
先上图吧
- java课后作业5
[问题]随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路: 1.申请一个长度为10的数组 2.计算机随机生成10个数,并赋给数组 3. ...
- 苹果的软件/系统盘 网站 http://www.panduoduo.net/u/bd-369186934/2
http://www.panduoduo.net/u/bd-369186934/2
- 手工加载DLL
1.为了能找到dll的函数地址,生成dll时需要将其中的函数声明为C函数(extern "C"): #ifndef __MYDLL_H#define __MYDLL_H #ifde ...
- C#调用C++DLL的小总结5---和C++的DLL的联合调试
http://fpcfjf.blog.163.com/blog/static/5546979320134922938373/ http://blog.csdn.net/jiangxinyu/artic ...
- @ifconfig eth0|awk -F "[ :]+" 'NR==2{print $4 "/" $NF}'中"[ :]+" 是什么意思?@
http://blog.csdn.net/zhuying_linux/article/details/6822987
- Snowflake Snow Snowflakes(哈希表的应用)
Snowflake Snow Snowflakes Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 27312 Accep ...
- win7Java开发环境配置
win7下Java开发环境的配置 首先下载符合操作系统版本的jdk,比如最新的jdk8: 下载链接:http://www.oracle.com/technetwork/java/javase/down ...