AngularJSTopics

AngularJS filters:-
Filters are used to change modify the data and can be clubbed in expression or directives using pipe character.

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


limitTo filter:- Can be used to limit the number of rows or characters in a string. Syntax:- 
  

 {{ expression | limitTo : limit : begin}}


Example:- First create javascript file and give name Script.js as following: 
  

var app = angular
        .module("myModule", [])
        .controller("myController", function ($scope) {

            var employees = [
                {
                    name: "Santosh Kumar Singh", dateOfBirth: new Date("October 5, 1991"),
                    gender: "Male", salary: 59000
                },
                {
                    name: "Reena Kumari", dateOfBirth: new Date("May 02, 1990"),
                    gender: "Female", salary: 70000.325
                },
                {
                    name: "Chandan Kumar", dateOfBirth: new Date("August 25, 1991"),
                    gender: "Male", salary: 55000
                },
                {
                    name: "Gagan Agrawal", dateOfBirth: new Date("October 2, 1991"),
                    gender: "Female", salary: 50000
                },
                {
                    name: "Shubha", dateOfBirth: new Date("December 30, 1989"),
                    gender: "Female", salary: 78000
                },
               {
                    name: "Anu Singh", dateOfBirth: new Date("December 28, 1988"),
                    gender: "Female", salary: 62000
                }
            ];

            $scope.employees = employees;
            $scope.rowCount = 3;
        });


Demo.html page 
  

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="angular.min.js"></script>
    <script src="Script.js"></script>
    <link href="Styles.css" rel="stylesheet" />
<style>
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;
}


</style>

</head>
<body ng-app="myModule">
<h2> AngularJS filters Demo:</h2>
    <div ng-controller="myController">
        Rows to display : <input type="number" step="1"
                                 ng-model="rowCount" max="6" 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>


Out Put: Browse the Demo.html and get the out put as shown in below image: