Part 8 AngularJS filters
Filters in angular can do 3 different things
1. Format data
2. Sort data
3. Filter data
Filters can be used with a binding expression or a directive
To apply a filter use pipe (|) character
Syntax : {{ expression | filterName:parameter }}
Angular filters for formatting data
Filter |
Description |
lowercase | Formats all characters to lowercase |
uppercase | Formats all characters to uppercase |
number | Formats a number as text. Includes comma as thousands separator and the number of decimal places can be specified |
currency | Formats a number as a currency. $ is default. Custom currency and decimal places can be specified |
date | Formats date to a string based on the requested format |
Angular Date formats
Format |
Result |
yyyy | 4 digit year. Exampe 1998 |
yy | 2 digit year. Example 1998 => 98 |
MMMM | January - December |
MMM | Jan - Dec |
MM | 01 - 12 |
M | 1 - 12 (No leading ZEROS) |
dd | 01 - 31 |
d | 1 - 31 (No leading ZEROS) |
Angular date format documentation
https://docs.angularjs.org/api/ng/filter/date
limitTo filter : Can be used to limit the number of rows or characters in a string.
Syntax : {{ expression | limitTo : limit : begin}}
The following example uses all the above filters
Script.js
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) { var employees = [
{
name: "Ben", dateOfBirth: new Date("November 23, 1980"),
gender: "Male", salary: 55000.788
},
{
name: "Sara", dateOfBirth: new Date("May 05, 1970"),
gender: "Female", salary: 68000
},
{
name: "Mark", dateOfBirth: new Date("August 15, 1974"),
gender: "Male", salary: 57000
},
{
name: "Pam", dateOfBirth: new Date("October 27, 1979"),
gender: "Female", salary: 53000
},
{
name: "Todd", dateOfBirth: new Date("December 30, 1983"),
gender: "Male", salary: 60000
}
]; $scope.employees = employees;
$scope.rowCount = 3;
});
HtmlPage1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
Rows to display : <input type="number" step="1"
ng-model="rowCount" max="5" min="0" />
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Date of Birth</th>
<th>Gender</th>
<th>Salary (number filter)</th>
<th>Salary (currency filter)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | limitTo:rowCount">
<td> {{ employee.name | uppercase }} </td>
<td> {{ employee.dateOfBirth | date:"dd/MM/yyyy" }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary | number:2 }} </td>
<td> {{ employee.salary | currency : "£" : 1 }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Styles.css
body {
font-family: Arial;
} table {
border-collapse: collapse;
} td {
border: 1px solid black;
padding: 5px;
} th {
border: 1px solid black;
padding: 5px;
text-align: left; }
Part 8 AngularJS filters的更多相关文章
- 【07】AngularJS Filters
AngularJS Filters 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency[ˈk ...
- 简单介绍AngularJs Filters
网站链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filters/ Filter作用就是接收一个输入,通过某 ...
- AngularJS Filters
过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从 ...
- 6.使用AngularJS模板来创建视图
AngularJS模板包含定义了额外的功能,对DOM元素行为的表达式,过滤器和指令. 1.了解模板 表达式:类似js的代码段.在作用域的上下文被求值.可以放置在普通的HTML文本或属性值中 <p ...
- Angularjs 使用filter格式化输出href
工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的,格式是{{ expression | ...
- AngularJS基础总结
w3shools angularjs教程 wiki <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...
- AngularJS Notes
ng-app The ng-app directive tells AngularJS that the <div> element is the "owner" of ...
- Angularjs 1 使用filter格式化输出href
Angularjs版本: 1.3.5 工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的, ...
- 在 Angular 中实现搜索关键字高亮
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...
随机推荐
- 汽车常用的ECU芯片
Power Train ECU的CPU用的比较多的基本来自于Infineon,ST,Freescale BOSCH的16位ECU M(E)7系列主要使用C167内核的CPU,早期的M(E)7系列使用西 ...
- 分享一个客户端程序(winform)自动升级程序,思路+说明+源码
做winform的程序,不管用没用过自动更新,至少都想过自动更新是怎么实现的. 我这里共享一个自动更新的一套版本,给还没下手开始写的人一些帮助,也希望有大神来到,给指点优化意见. 本初我是通过sock ...
- js原生appendChild的bug
appendChild 主要是用来追加节点 插入到最后 window.onload = function(){ var ul2 = document.getElementById('ul2'); va ...
- 多个非同源的shared_ptr管理对象引起double free
有多个不同源的shared_ptr管理对象时会出现多次释放对象,这里不同源是指多组间不是通过拷贝构造.复制等手段而来的,即几组shared_ptr是独立声明的. #include<iostrea ...
- cocos2dx动画Animation介绍
一.帧动画 你能够通过一系列图片文件,像例如以下这样,创建一个动画: [cpp] CCAnimation *animation = CCAnimation::create(); //从本 ...
- Android 开发之异常处理篇(一):SDK Manager 闪退的解决方法
这个问题困扰了我很久,之前没解决,就放一放.后来我又专门拿了一个下午来找解决方法,终于搞定! 我的解决方法是修改 android.bat,直接指定java.exe所在位置,不用去调用find_java ...
- ubuntu在xampp下安装memcache扩展
sudo wget http://pecl.php.net/get/memcache-2.2.1.tgz sudo tar vxzf memcache-2.2.1.tgz cd memcache-2. ...
- cocos2d-x中CCCallFunc CCCallFuncN CCCallFuncND的区别和使用示例
转自:http://xiandanboke.com.cn/cocos2d-xcccallfunc.html CCCallFunc CCCallFuncN CCCallFuncND的区别和使用 CCCa ...
- LinkedHashMap介绍
转载:http://uule.iteye.com/blog/1522291 jdk1.7API文档链接:http://tool.oschina.net/apidocs/apidoc?api=jdk_7 ...
- Android实现XML解析技术
转载:Android实现XML解析技术 本文介绍在Android平台中实现对XML的三种解析方式. XML在各种开发中都广泛应用,Android也不例外.作为承载数据的一个重要角色,如何读写XML成为 ...