How do you create a custom filter to filter any text in the data source in AngularJs?

Manish Sharma 850 16 May 2024

1 Answers

Anubhav Sharma 16 May 2024

Creating a custom filter in AngularJS to filter text in a data source involves defining a new filter function and then applying it within your application.

Below are the steps to create and use a custom filter in AngularJS:

Step 1: Define the Custom Filter

First, you need to create a new filter in your AngularJS application module. This is done using the filter method on your module, where you define the filter logic.

app.filter('customTextFilter', function () {
    return function (array, text) {
        if (!text)
            return array;

        var filtered = [];
        angular.forEach(array, function (item) {
            if (item.toLowerCase().indexOf(text.toLowerCase()) !== -1) {
                filtered.push(item);
            }
        });
        return filtered;
    };
});

Step 2: Use the Custom Filter in the Controller

In your controller, prepare the data you want to filter and the search text.

var app = angular.module('app', []);
app.controller('MainController', function ($scope) {
    $scope.items = ["Apple", "Apricot", "Avocado", "Banana", "Bilberry", "Blackberry", "Blackcurrant", "Blueberry", "Boysenberry", "Currant", "Cherry", "Cherimoya", "Cloudberry", "Coconut", "Cranberry", "Custard apple", "Damson", "Date", "Dragonfruit", "Durian", "Elderberry", "Feijoa", "Fig", "Goji berry", "Gooseberry", "Grape", "Raisin", "Grapefruit", "Guava"];
});

Step 3: Apply the Custom Filter in the View

In your HTML, apply the custom filter to the data using AngularJS's filter syntax.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body>
    <div data-ng-app="app" class="container" ng-controller="MainController">
        <div class="" data-ng-init="numbers = [1, 2,3, 7, 8, 15, 42, 65, 25, 12, 36, 74, 85, 96, 49]; text='Odd'">
            <p><span class="fw-bold text-capitalize">{{text}}</span> list</p>
            <span class="" data-ng-repeat="item in numbers | numberType:text">{{item}}, </span>
        </div>
        <hr>
        <div>
            <!-- Create a form for filter data -->
            <form class="row g-3">
                <div class="col-12">
                    <div class="d-flex justify-content-between flex-column flex-md-row">
                        <h3>Search fruits </h3>
                        <!-- create input box for send and recive user input to controller  -->
                        <input type="search" data-ng-model="searchText" placeholder="Search..."
                            class="form-control w-auto" autofocus="true" />
                    </div>
                </div>
                <hr>
                <div class="w-100 py-3"
                    data-ng-if="(clientFilteredArray = (fruits | customTextFilter:searchText)).length == 0">
                    <div class="d-flex justify-content-center fw-bold">
                        <div class="text-center">
                            <p class=" fs-2 ">
                                <span class="me-2">😕</span>
                                No fruits were found
                            </p>
                            <p class="fw-normal">try somthing new keywords</p>
                        </div>
                    </div>
                </div>
                <!-- check count is >0 then show if condisin is fail then this div is hide-->
                <div class="col-12" data-ng-if="clientFilteredArray.length > 0">
                    <!-- iterate the items -->
                    <ul>
                        <li data-ng-repeat="item in clientFilteredArray" data-ng-bind="item"></li>
                    </ul>
                </div>
            </form>
        </div>
    </div>

    <script>
        var app = angular.module('app', []);
        app.controller('MainController', function ($scope) {
            $scope.fruits = ["Apple", "Apricot", "Avocado", "Banana", "Bilberry", "Blackberry", "Blackcurrant", "Blueberry", "Boysenberry", "Currant", "Cherry", "Cherimoya", "Cloudberry", "Coconut", "Cranberry", "Custard apple", "Damson", "Date", "Dragonfruit", "Durian", "Elderberry", "Feijoa", "Fig", "Goji berry", "Gooseberry", "Grape", "Raisin", "Grapefruit", "Guava"];
        });
        app.filter('reverse', function () { /*This is reverse filter it take a string and return the reverse of string */
            return function (input) {
                if (!input) return '';
                return input.split('').reverse().join('');
            };
        });
        app.filter('numberType', function () { /* this is numberType custom filter it take an array of interger and numbertype like ['even', 'odd', 'prime'], It return value according to your choice. */
            return function (array, text) {
                var filteredArray = [];
                if (!text || !['even', 'odd', 'prime'].map(function (item) { return item.toLowerCase(); }).includes(text.toLowerCase())) {
                    return array;
                }
                switch (text.toLowerCase()) {
                    case 'even':
                        filteredArray = array.filter(function (item) {
                            return item % 2 === 0;
                        });
                        break;
                    case 'odd':
                        filteredArray = array.filter(function (item) {
                            return item % 2 !== 0;
                        });
                        break;
                    case 'prime':
                        filteredArray = array.filter(function (item) {
                            if (item < 2) return false;
                            for (var i = 2; i <= Math.sqrt(item); i++) {
                                if (item % i === 0) return false;
                            }
                            return true;
                        });
                        break;
                }
                return filteredArray;
            };
        });
        app.filter('customTextFilter', function () {
            return function (array, text) {
                if (!text)
                    return array;

                var filtered = [];
                angular.forEach(array, function (item) {
                    if (item.toLowerCase().indexOf(text.toLowerCase()) !== -1) {
                        filtered.push(item);
                    }
                });
                return filtered;
            };
        });
    </script>
</body>

</html>

Explanation

The steps here are similar to the ones described earlier. However, in the filter function:

We iterate over each item in the JSON array.
Then, for each item, we iterate over its properties to check if any property contains the searchText.
If any property matches, we add the item to the filtered array.

Thank you.

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How do you create a custom filter to filter any text in the data source in AngularJs?

Can you answer this question?

1 Answers