limitTo filter for limiting displayed data

The limitTo filter in AngularJS is used to restrict the number of items displayed in an array or a string. It is useful when displaying paginated data, trimming long text, or limiting displayed elements dynamically.

Limits the number of displayed items in an array
Truncates strings based on a given length
Can display data from the beginning or end
Works well with ng-repeat for pagination

---

1. Basic Syntax of limitTo

{{ array | limitTo: number }}

Where:

• number → Specifies the number of elements to display.
• If number is positive (n), it shows the first n elements.
• If number is negative (-n), it shows the last n elements.

---

2. Using limitTo with Arrays

Example: Displaying Only 3 Items from a List

<ul>
    <li ng-repeat="item in items | limitTo:3">
        {{ item }}
    </li>
</ul>

var app = angular.module('myApp', []);
app.controller('LimitController', function($scope) {
    $scope.items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
});

Output:

• Apple
• Banana
• Cherry
  (Only the first 3 items are shown)

---

3. Displaying the Last Few Elements

To display the last n elements, use a negative number.

Example: Displaying the Last 2 Fruits

<ul>
    <li ng-repeat="fruit in fruits | limitTo:-2">
        {{ fruit }}
    </li>
</ul>

app.controller('FruitController', function($scope) {
    $scope.fruits = ["Mango", "Orange", "Grapes", "Pineapple", "Papaya"];
});

Output:

• Pineapple
• Papaya

---

4. Using limitTo with Strings

You can also use limitTo to limit the number of characters in a string.

Example: Truncating a Long Sentence

<p>{{ description | limitTo:20 }}...</p>

app.controller('TextController', function($scope) {
    $scope.description = "AngularJS is a powerful JavaScript framework for building web applications.";
});

Output:
AngularJS is a power...
(Only the first 20 characters are displayed)

---

5. User-Controlled Limiting

You can allow users to select how many items to display.

Example: Dynamic Limit Selection

<select ng-model="limitValue">
    <option value="2">Show 2</option>
    <option value="4">Show 4</option>
    <option value="-2">Show Last 2</option>
</select>

<ul>
    <li ng-repeat="name in names | limitTo:limitValue">
        {{ name }}
    </li>
</ul>

app.controller('DynamicLimitController', function($scope) {
    $scope.names = ["Alice", "Bob", "Charlie", "David", "Eve"];
    $scope.limitValue = 2;
});

Feature:

• Users can dynamically change the number of displayed items.

---

6. Combining limitTo with orderBy

You can sort and then limit results.

Example: Displaying the Top 3 Highest Salaries

<ul>
    <li ng-repeat="employee in employees | orderBy:'-salary' | limitTo:3">
        {{ employee.name }} - {{ employee.salary | currency }}
    </li>
</ul>

app.controller('EmployeeController', function($scope) {
    $scope.employees = [
        { name: "John", salary: 50000 },
        { name: "Jane", salary: 80000 },
        { name: "Michael", salary: 60000 },
        { name: "Alice", salary: 90000 },
        { name: "Bob", salary: 75000 }
    ];
});

Output:

• Alice – $90,000
• Jane – $80,000
• Bob – $75,000
  (Only the top 3 salaries are displayed)

---

7. Pagination Using limitTo

You can use limitTo along with ng-click to implement pagination.

Example: Simple Pagination

<button ng-click="startIndex = startIndex - 2" ng-disabled="startIndex <= 0">Previous</button>
<button ng-click="startIndex = startIndex + 2" ng-disabled="startIndex + 2 >= items.length">Next</button>

<ul>
    <li ng-repeat="item in items | limitTo:2:startIndex">
        {{ item }}
    </li>
</ul>

app.controller('PaginationController', function($scope) {
    $scope.items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"];
    $scope.startIndex = 0;
});

Features:

• Displays 2 items per page.
• “Next” and “Previous” buttons navigate through pages.