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 ...
随机推荐
- 为Kindeditor控件添加图片自动上传功能
Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果.它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET.PHP.ASP.Java等.官 ...
- 【leetcode】Minimum Size Subarray Sum(middle)
Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...
- 【网络】VPN
VPN: 来自百度百科 虚拟专用网络的功能是:在公用网络上建立专用网络,进行加密通讯.在企业网络中有广泛应用.VPN网关通过对数据包的加密和数据包目标地址的转换实现远程访问.VPN有多种分类方式,主要 ...
- 20145213《Java程序设计》第四周学习总结
20145213<Java程序设计>第四周学习总结 教材学习内容总结 本周任务是学习面向对象的继承.接口以及之后的如何活用多态.(还真是路漫漫其修远兮啊!)教材也是延续上周艰深晦涩的语言风 ...
- IOS- 自定义 UIButton
#pragma mark init方法内部默认会调用initWithFrame: - (id)initWithFrame:(CGRect)frame { self = [super initWithF ...
- maven入门基础(转)
maven介绍 maven是构建工具,也是构建管理工具.ant只是构建工具,因为不支持生成站点功能,只有预处理,编译,打包,测试,部署等功能. maven坐标 groupId:项目组织的逆向域名,比如 ...
- wifi参考网站
1.Wireless LAN resources for Linux http://www.hpl.hp.com/personal/Jean_Tourrilhes/Linux/Wireless.htm ...
- lvs+keepalived 负载均衡
LVS是一个开源的软件,可以实现LINUX平台下的简单负载均衡.LVS是Linux Virtual Server的缩写,意思是Linux虚拟服务器.目前有三种IP负 载均衡技术(VS/NAT.VS/T ...
- .NET Nancy 详解(四) Self Host
Self Host 使得Nancy 能够在任意application 中启动,无论是console 还是windows service.这期我们使用的版本是Nancy v0.4.0. Demo 首先看 ...
- .NET Nancy 详解(一) 初识
Nancy 是一个轻量级的,简单粗暴的framework用来构建基于HTTP的各种服务,兼容.Net和Mono.Nancy的整套设计理念是基于"super-duper-happy-path& ...