Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

AngularJS filters

Suggested Videos
Part 5 - Two way databinding in AngularJS
Part 6 - AngularJS ng-repeat directive
Part 7 - Handling events in AngularJS



In this video we will discuss filters in AngularJS



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
angularjs filters example

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;
}

Upcoming videos : Sorting and filtering data using angular filters

AngularJS tutorial for beginners

3 comments:

  1. Great work, I'm a big fan of yours ! greetings from Mauritius

    ReplyDelete
  2. Excellent in depth Explanations!
    A correction: While trying to work with the code sample the increment did not work, in the HTML page ng-model directive for rowCount had to be shifted position within the input tag to make it work. Strange but worked only when declared before the step attribute or at the end of the input tag.
    This Worked:
    input type="number" ng-model="rowCount" step="1"   max="5" min="0"
    This did not work:
    input type="number" step="1" ng-model="rowCount" max="5" min="0"

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.