你的位置:首页 > Java教程

[Java教程]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 ="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;}