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 ...
随机推荐
- windows下ftp命令大全
FTP Server: home4u.at.china.com User: yepanghuang Password: abc123 打开Windows的开始菜单,执行“运行”命令,在对话框中输入ft ...
- win7 ubuntu10.04双系统,重装win7后,修复双启动项
进入ubuntu的liveCD(即在试用ubuntu里),在终端里操作 首先要找到自己的ubuntu系统挂载在那个sda下面.可以用sudo fdisk -l 这个命令.然后: 1. sudo -i ...
- 从API请求数据的方法(主要适用于tp5)
// 从api获取数据,$data是一个数组,默认为空,请求数据的方法可以通用,但是其它说明只适用于tp5 function postData($url,$data=''){ $ch = curl_i ...
- Qt Creator 中关于调试器的设置
Qt Creator3.4.2 Based on Qt 5.5.0 (MSVC 2013, 32 bit) 在安装了VS2013的电脑上能够自动识别VS编译器,却不能识别调试器 需要下载一个wdk,安 ...
- wc(Word Count)
.查看文件的字节数.字数.行数 wc test.txt --> 行数 单词数 字节数 文件名 .用来统计当前目录下的文件数(数量中包含当前目录) ls -l | wc -l -c 统计字节数. ...
- 隐藏<input type="file"> 实现点击div或图片打开文件选择路径
HTML: <input type="file" style="display:none" id="addfile-btn"> ...
- Java bean validation 规范与参考实现
1.Apache Bval 依赖包:validation-api-1.1.0.Final.jar org.apache.bval.bundle-1.1.1.jar bval-core-1.1.1.ja ...
- [转] C++的STL库,vector sort排序时间复杂度 及常见容器比较
http://www.169it.com/article/3215620760.html http://www.cnblogs.com/sharpfeng/archive/2012/09/18/269 ...
- hdu1014
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1014 //hdu1014 0ms #include<stdio.h> #include&l ...
- 快速反编绎jar war包
反编译这些class文件或jar包或war包,用TTools https://github.com/Supermax197/TTools [root@ok action]# tree /home/ok ...