forum

home / developersection / forums / how do you create a custom filter to filter any text in the data source in angularjs?

Ask Question
Manish Sharma

Admin

When you can't control what's happening, challenge yourself to control the way you respond to what's happening. That's where your power is! Sometimes we need fantasy to survive reality. There is great beauty in simplicity

Follow
Can you answer this question?
Answer

1 Answers

Anubhav Kumar

Anubhav Kumar

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.

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy