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:Linear world(POJ 2674)
Linear world 题目大意:一些人生活在线性世界中,到达线性世界两端就会消失,两个人的前进方向有两个,相遇会改变各自相遇方向,求最后一个人掉下的人的名字和时间. 其实这一题就是弹性碰撞的模 ...
- App主界面Tab实现方法
ViewPager + FragmentPagerAdapter 这里模仿下微信APP界面的实现 国际惯例,先看下效果图: activity_main.xml 布局文件: <?xml ver ...
- 【leetcode】Integer to Roman & Roman to Integer(easy)
Roman to Integer Given a roman numeral, convert it to an integer. Input is guaranteed to be within t ...
- 创建URL为空的解决办法
在使用+URLWithString:或-initWithString:创建一个URL对象时,提供的参数字符串必须符合RFC 2396标准(O网页链接.而这两个方法又是根据RFC 1738(O网页链接和 ...
- Target runtime Apache Tomcat v6.0 is not defined.错误解决方法
一.背景 最近在使用本地的tomcat进行运行项目的时候,发现出现了如题所述的问题.不知道什么原因,经过努力解决了该问题. 二.解决步骤 右击项目---选择属性---选择targeted runtim ...
- SQLServer视图
视图简介:通过定义 SELECT 语句以检索将在视图中显示的数据来创建视图.SELECT 语句引用的数据表称为视图的基表.在SQL Server 2005系统中,可以把视图分为3种类型,即标准视图,索 ...
- NPOI基本操作XLS
using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using Sys ...
- kmp
#include <bits/stdc++.h> #define MAXN 100000 using namespace std; string a, b; int next[MAXN]; ...
- 1.1-java创建包和类的方法
1.new-package-命名方法com打头.中间名称.后台要创建的class 2.创建class- new-class 选择一下主方法 代码示例 编译完保存一下就能输出信息,一直没有保存才 ...
- python中使用sub替换字符串中的元素