filter filter – Searching inside arrays

The filter filter in AngularJS is used to search and filter elements inside an array based on specified criteria. It is commonly used to dynamically filter lists or tables in web applications.

---

1. Syntax of the Filter Filter

The filter filter is applied in AngularJS templates using the pipe (|) symbol.

{{ array | filter: expression }}

• array: The array to be filtered.
• expression: The search term or filter condition.

---

2. Basic Usage of the Filter Filter

Example: Simple Text Search

Suppose we have a list of names, and we want to search for a specific name.

<input type="text" ng-model="searchText" placeholder="Search name..." />
<ul>
    <li ng-repeat="name in names | filter: searchText">
        {{ name }}
    </li>
</ul>

var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
    $scope.names = ["Alice", "Bob", "Charlie", "David", "Eve"];
});

How It Works

• When a user types into the input box, ng-model="searchText" binds the input value to the scope.
• The filter: searchText dynamically filters names that contain the entered text.

Example Search Results:

• Typing “A” shows: Alice
• Typing “B” shows: Bob

---

3. Filtering Objects in an Array

Example: Searching in a List of Objects

If the data contains objects instead of simple strings, AngularJS can search within object properties.

<input type="text" ng-model="searchTerm" placeholder="Search by name or city..." />
<ul>
    <li ng-repeat="person in people | filter: searchTerm">
        {{ person.name }} - {{ person.city }}
    </li>
</ul>

var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
    $scope.people = [
        { name: "Alice", city: "New York" },
        { name: "Bob", city: "Los Angeles" },
        { name: "Charlie", city: "Chicago" },
        { name: "David", city: "Miami" },
        { name: "Eve", city: "Houston" }
    ];
});

How It Works

• Searching “New” returns “Alice – New York”.
• Searching “Charlie” returns “Charlie – Chicago”.

🔹 By default, the filter filter searches across all properties of an object.

---

4. Filtering by a Specific Property

By default, the filter checks all object properties. To filter by a specific property, use object notation.

<input type="text" ng-model="searchName" placeholder="Search by name..." />
<ul>
    <li ng-repeat="person in people | filter: { name: searchName }">
        {{ person.name }} - {{ person.city }}
    </li>
</ul>

Example Search Results

• Typing “B” filters to “Bob – Los Angeles”.
• Typing “E” filters to “Eve – Houston”.

---

5. Filtering with Multiple Criteria

We can filter using multiple conditions by specifying an object with multiple key-value pairs.

<input type="text" ng-model="search.name" placeholder="Search by name..." />
<input type="text" ng-model="search.city" placeholder="Search by city..." />

<ul>
    <li ng-repeat="person in people | filter: search">
        {{ person.name }} - {{ person.city }}
    </li>
</ul>

Example Search Results

• Name = “Bob”, City = “Los Angeles” shows:
  Bob - Los Angeles
• Name = “Charlie”, City = “Chicago” shows:
  Charlie - Chicago

🔹 The filter ensures that both conditions must be met.

---

6. Filtering with Functions

Instead of passing a string or object, you can use a custom function to filter elements dynamically.

Example: Filtering Based on String Length

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

$scope.names = ["Alice", "Bob", "Charlie", "David", "Eve"];
$scope.longNames = function(name) {
    return name.length > 4; // Only return names longer than 4 characters
};

Output

• Names longer than 4 characters are shown: Alice, Charlie, David.

---

7. Filtering with Boolean Conditions

If an object has a boolean property, you can filter based on true or false.

<input type="checkbox" ng-model="showActive" /> Show Only Active Users
<ul>
    <li ng-repeat="user in users | filter: { active: showActive }">
        {{ user.name }} ({{ user.active ? "Active" : "Inactive" }})
    </li>
</ul>

$scope.users = [
    { name: "Alice", active: true },
    { name: "Bob", active: false },
    { name: "Charlie", active: true },
    { name: "David", active: false }
];

How It Works

• If the checkbox is checked, only active users appear.
• If unchecked, all users appear.

---

8. Filtering Case-Insensitive Searches

By default, AngularJS filter is case-insensitive, meaning “alice” matches “Alice”.

For case-sensitive searches, use a custom function.

$scope.caseSensitiveFilter = function (item) {
    return item.name === $scope.searchText;
};

<ul>
    <li ng-repeat="user in users | filter: caseSensitiveFilter">
        {{ user.name }}
    </li>
</ul>

---

9. Performance Considerations

Avoid Using Filters Inside ng-repeat

<li ng-repeat="user in users | filter: searchText">
    {{ user.name }}
</li>

Problem:
Each digest cycle, AngularJS re-applies the filter, impacting performance.

Optimize by Precomputing Filtered Data

$scope.filteredUsers = $scope.users.filter(user => user.name.includes($scope.searchText));

<li ng-repeat="user in filteredUsers">
    {{ user.name }}
</li>

Improvement:
Filters are applied once instead of repeatedly.