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的更多相关文章

  1. 【07】AngularJS Filters

    AngularJS Filters 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency[ˈk ...

  2. 简单介绍AngularJs Filters

    网站链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filters/ Filter作用就是接收一个输入,通过某 ...

  3. AngularJS Filters

    过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从 ...

  4. 6.使用AngularJS模板来创建视图

    AngularJS模板包含定义了额外的功能,对DOM元素行为的表达式,过滤器和指令. 1.了解模板 表达式:类似js的代码段.在作用域的上下文被求值.可以放置在普通的HTML文本或属性值中 <p ...

  5. Angularjs 使用filter格式化输出href

    工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的,格式是{{ expression | ...

  6. AngularJS基础总结

    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...

  7. AngularJS Notes

    ng-app The ng-app directive tells AngularJS that the <div> element is the "owner" of ...

  8. Angularjs 1 使用filter格式化输出href

    Angularjs版本: 1.3.5 工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的, ...

  9. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

随机推荐

  1. JSON的解析

    一:JSON字符串转换为JSON对象 JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript ...

  2. 【转】selenium及webdriver的原理

    主要内容转自:http://blog.csdn.net/ant_ren/article/details/7968582和http://blog.csdn.net/ant_ren/article/det ...

  3. Java读取Properties配置文件

    1.Properties类与Properties配置文件 Properties类继承自Hashtable类并且实现了Map接口,使用键值对的形式来保存属性集.不过Properties的键和值都是字符串 ...

  4. CSS3 Animation 基于 less 构建的 css3 动画库

    LESS动画优点 · 快速开发css3动画 · 采用less mixins写法,不会生成冗余css · 已加入主流浏览器前缀,保证最大兼容性 · LESS-Animation 部分mixins支持传参 ...

  5. Android图片圆角效果

    一般来说图片加圆角可以使用 Java 的方式来进行, 对图片略加处理即可, 但也可以使用纯XML+Nice-Patch图片来进行, 这样的速度会更快. 如果背景是纯色的情况下建议使用此方法. 原理则是 ...

  6. 好记心不如烂笔头之JQuery学习，第二章

    jQuery获取元素不需要担心元素不存在而报错,但是无论怎样 $("#xxx") 是一定会有返回值的,无论存不存在元素,那么依然是要对元素做判断的,判断的方法常见两种 1.看返回的 ...

  7. 用SecureCRT来上传和下载数据

    借助securtCRT,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器. 其中,对于sz和rz的理解与记忆我用了如下的方法(很多时候容易搞混): ...

  8. cocos2d win7 安卓环境配置开发

    相关工具 下载 Android SDK 下载和安装 Android NDK版本不要选r9的.用r8e!r9会报错 下载安装JDK版本是 jdk-7u13-windows-x64.exe 下载和安装Cy ...

  9. 排序命令sort

    Unix和Linux自带的sort命令功能非常强大,其主要功能是对文本内容按不同的方法排序.它不仅可以按一个或多个字段排序,还可以合并文件.使用sort处理一些较大的文件时,可能处理速度会比较慢,但却 ...

  10. 如何使用nodejs发邮件

    昨天就开始想使用nodemailer来实现一个发送邮件的功能,不过发现了很多个坑,网上给的资料也很杂很乱,所以决定写一篇真正能用的来帮助大家减少弯路 首先,我们先来看下代码,如上所示. 步骤: 1.下 ...