Wednesday, 17 May 2017

Limit Filter


The limitTo filter returns an array or a string containing only a specified number of elements.
When the limitTo filter is used for arrays, it returns an array containing only the specified number of items.
When the limitTo filter is used for strings, it returns a string containing, only the specified number of characters.
{{ object | limitTo : limit : begin }}
Limit : A number, specifying how many elements to return
Begin : Optional. A number specifying where to begin the limitation. Default is 0
When the limitTo filter is used for numbers, it returns a string containing only the specified number of digits.
Use negative numbers to return elements starting from the end of the element, instead of the beginning.

Simple example :


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="name in names | limitTo : +3">{{name}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.names = ["Axel", "Mark", "Shown", "June", "Eric"];
});
</script>
</body>
</html>

In above example “limitTo” filter used which display first three records only.

Complex Example : 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Row Limi Example</title>
<link href="Styles.css" rel="stylesheet"/>
<script>
                        var app = angular.module("myModule", []);
                        app.controller("myController", function($scope){
                        var employees = [
                        {firstName: "Linda", lastName: "Anderson", dob: new Date("November 21, 1997"), gender: "Female", salary: 80000.45 },
                        {firstName: "axel", lastName: "Blez", dob: new Date("June 10, 1996"), gender: "Male", salary: 59000.98 },
                        {firstName: "Mark", lastName: "Avence", dob: new Date("May 5, 1995"), gender: "Male", salary: 45000 },
                        {firstName: "shown", lastName: "Frost", dob: new Date("October 17, 1994"), gender: "Male", salary: 35000 },
                        ];
                                                $scope.employees = employees;
                                                $scope.rowLimit = 3;
                        });      
</script>
</head>
<body>
            <div ng-app="myModule" ng-controller="myController">
                        Row Limit : <input type="number" step="1" min="0" max="5" ng-model="rowLimit" />
                        <br><br><table>
                                    <thead>
                                                <tr>
                                                <th>FirstName</th>
                                                <th>LastName</th>
                                                <th>Date Of Birth</th>
                                                <th>Gender</th>
                                                <th>Salary</th>
                                                </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="employee in employees | limitTo:rowLimit ">
                                                <td>{{ employee.firstName | uppercase }}</td>
                                                <td>{{ employee.lastName | lowercase }}</td>
                                                <td>{{ employee.dob | date: "dd/MM/yyyy" }}</td>
                                                <td>{{ employee.gender | lowercase }}</td>
                                                <td>{{ employee.salary | currency }}</td>
                                    </tr>
                                    </tbody>
                        </table>
</div>
</body>
</html>

Style.css File

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

Explaination :

Row Limit : <input type="number" step="1" min="0" max="5" ng-model="rowLimit" />

Min and max shows the minimum and maximum values. Ng-model “rowLimit” bind textbox data with “limitTo” filter and display the number of records equal to the number in the textbox.



No comments:

Post a Comment