Part 8 AngularJS filters
2024-10-11 15:01:51
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; }
最新文章
- ElasticSearch 5学习(4)——简单搜索笔记
- wex5平台放入tabs组件后运行时显示空白
- [bzoj4551][Tjoi2016][Heoi2016]树
- Android Studio 环境部署 (转载)
- Material Design风格的水波涟漪效果(Ripple Effect)的实现
- BackgroundWorker实现的winfrom中实现异步等待加载图片显示
- 让资源可以下载a
- Vim -&;gt; 边确认边查找替换
- 126邮箱发送邮件python实现
- Hessian探究(一)Hessian与springMVC结合
- 渗透测试工具之sqlmap
- Linux性能优化gprof使用
- ES6 学习笔记(整理一遍阮一峰大神得入门文档,纯自己理解使用)
- Java学习之路(十二):IO流
- DNS记录类型名单
- 第十章 OPENWRT安装nohup,因为不明原因nohup没有安装
- spring boot 在什么时候启动的tomcat
- Android 6.0 Marshmallow root 方法
- python第四周迭代器生成器序列化面向过程递归
- 【原创】Linux环境下的图形系统和AMD R600显卡编程(4)——AMD显卡显存管理机制
热门文章
- ibatis基本内容简介
- 关于Collection&#39;
- Codeforces Round #309 (Div. 1) B. Kyoya and Permutation 构造
- 内​存​泄​露​调​试​之​ ​v​i​s​u​a​l​ ​l​e​a​k​ ​d​e​t​e​c​t​o​r​ ​工​具【转】
- 局域网两台笔记本如何使用svn
- iOS 设计模式之抽象工厂
- 一步步学Mybatis-以接口操作的方式编程(2)
- opencv china 网站,好1376472449
- 【JavaScript】关于javascript原型的深入理解
- MPI编程简单介绍