How to Filter Multiple Values in AngularJS ?

Last Updated : 06 Oct, 2023

AngularJS is one of the popular frameworks of many web developers to create dynamic single-page web applications. To make the application more and more dynamic, we can use the filtering of data feature to dynamically show the data to the user as per the input or selection. These provide a better user experience by enabling dynamic and responsive data filtering. In this article, we will see how we can filter multiple values in AngularJS using various methods.

Approaches for filtering the multiple values

Using ng-repeat and AngularJS Filters
Using a Custom Filter Function

Steps to configure the AngularJS Project

The below steps will be followed to configure the AngularJS Applications:

Step 1: Create a new folder for the project. We are using the VSCode IDE to execute the command in the integrated terminal of VSCode.

mkdir filter-data
cd filter-data

Step 2: Create the index.html file which will have the entire behavior of the application including the styling, AngularJS code, and structural HTML code.

We will understand the above concept with the help of suitable approaches & will understand its implementation through the illustration.

Filtering multiple values using ng-repeat and AngularJS Filters

In this method, we are filtering the multiple values in AngularJS by using the inbuilt ‘ng-repeat’ directive and the filters. Using this approach we can easily filter out the values according to the criteria in real-time in our field text or by using the dropdowns. Here, we have defined an array and we are filtering it according to the criteria of the user. the ‘ng-repeat’ directive here allows us or the user to iterate over the array and display them dynamically. filter method is used to filter out the array of elements according to the title and flavor.

Example: Below is an example that showcases how to perform filtering of multiple values in AngularJS using ng-repeat and AngularJS filters.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> 
      </script> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #f5f5f5; 
            margin: 0; 
            padding: 0; 
        } 
  
        .header { 
            text-align: center; 
            padding: 20px; 
            margin: 0; 
        } 
  
        .header h1 { 
            color: #4CAF50; 
            font-size: 36px; 
            margin: 0; 
            font-weight: bold; 
        } 
  
        .sub-header { 
            text-align: center; 
            color: #333; 
            font-size: 20px; 
            margin: 0; 
            padding: 10px; 
        } 
  
        .article-list { 
            list-style-type: none; 
            padding: 0; 
            margin: 20px; 
        } 
  
        .article-item { 
            margin: 10px 0; 
            padding: 10px; 
            background-color: #ffffff; 
            border-radius: 5px; 
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        } 
  
        .filter-input { 
            width: 100%; 
            padding: 10px; 
            margin: 10px 0; 
            border: 1px solid #ccc; 
            border-radius: 5px; 
        } 
  
        @media (max-width: 767px) { 
            .filter-input { 
                margin: 10px 0 0; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <div ng-controller="myController"> 
        <div class="container"> 
            <div class="header"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
            <div class="sub-header"> 
                <h3> 
                      Approach 1: Using ng-repeat and  
                    AngularJS Filters 
                  </h3> 
            </div> 
            <div class="row"> 
                <div class="col-lg-6"> 
                    <input class="filter-input" 
                           type="text"
                           ng-model="filter.title" 
                           placeholder="Filter by Title"> 
                </div> 
                <div class="col-lg-6"> 
                    <input class="filter-input" 
                           type="text"
                           ng-model="filter.flavor" 
                           placeholder="Filter by Flavor"> 
                </div> 
            </div> 
            <ul class="article-list"> 
                <li class="article-item" 
                    ng-repeat="article in articles | filter: filter"> 
                    {{article.title}} (Flavor: {{article.flavor}}) 
                  </li> 
            </ul> 
        </div> 
    </div> 
  
    <script> 
        var app = angular.module('myApp', []); 
  
        app.controller('myController', function ($scope) { 
            $scope.articles = [ 
                { title: 'AngularJS Introduction',  
                  flavor: 'Frontend' }, 
                { title: 'Node.js Basics',  
                  flavor: 'Backend' }, 
                { title: 'React vs. Angular Comparison',  
                  flavor: 'Frontend' }, 
                { title: 'JavaScript Fundamentals',  
                  flavor: 'Frontend' }, 
                { title: 'HTML5 and CSS3 Tutorial',  
                  flavor: 'Frontend' }, 
                { title: 'Python for Beginners',  
                  flavor: 'Backend' }, 
                { title: 'Data Structures in C++',  
                  flavor: 'Programming' }, 
                { title: 'Machine Learning with Python',  
                  flavor: 'AI' }, 
                { title: 'Web Development with React',  
                  flavor: 'Frontend' }, 
                { title: 'Java Programming Basics',  
                  flavor: 'Backend' }, 
            ]; 
            $scope.filter = {}; 
        }); 
    </script> 
</body> 
  
</html>

Output:

Filter1

Filter multiple values using a Custom Filter Function

In this approach, we are filtering the multiple values in AngularJS using the custom filter function or without relying on the built-in filters. Initially, we have taken the list of articles and their sub-attributes like flavor and rating. According to our input, the custom filter function dynamically updates the articles based on the user’s criteria. This approach provides more features and broad usage in the application as we can set our custom filters with various criteria and user input validations.

Example: Below is an example that showcases how to perform filtering of multiple values in AngularJS using the Custom Filter Function.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> 
    </script> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #f5f5f5; 
            margin: 0; 
            padding: 0; 
        } 
  
        .header { 
            text-align: center; 
            padding: 20px; 
            margin: 0; 
        } 
  
        .header h1 { 
            color: #4CAF50; 
            font-size: 36px; 
            margin: 0; 
            font-weight: bold; 
        } 
  
        .sub-header { 
            text-align: center; 
            color: #333; 
            font-size: 20px; 
            margin: 0; 
            padding: 10px; 
            font-weight: bold; 
        } 
  
        .filter-input { 
            width: 100%; 
            padding: 10px; 
            margin: 10px 0; 
            border: 1px solid #ccc; 
            border-radius: 5px; 
        } 
  
        .article-list { 
            list-style-type: none; 
            padding: 0; 
            margin: 20px; 
        } 
  
        .article-item { 
            margin: 10px 0; 
            padding: 10px; 
            background-color: #ffffff; 
            border-radius: 5px; 
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        } 
  
        .article-item:hover { 
            background-color: #f2f2f2; 
            transition: background-color 0.3s ease; 
        } 
  
        @media (max-width: 767px) { 
            .filter-input { 
                margin: 10px 0 0; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <div ng-controller="myController"> 
        <div class="container"> 
            <div class="header"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
            <div class="sub-header"> 
                <h3> 
                      Approach 2: Using a Custom 
                    Filter Function 
                  </h3> 
            </div> 
            <div class="row"> 
                <div class="col-md-4"> 
                    <input class="filter-input" 
                           type="text" 
                           ng-model="filter.title" 
                           placeholder="Filter by Title"> 
                </div> 
                <div class="col-md-4"> 
                    <input class="filter-input" 
                           type="text" 
                           ng-model="filter.flavor" 
                           placeholder="Filter by Flavor"> 
                </div> 
                <div class="col-md-4"> 
                    <input class="filter-input" 
                           type="text" 
                           ng-model="filter.rating" 
                           placeholder="Filter by Rating"> 
                </div> 
            </div> 
            <ul class="article-list"> 
                <li class="article-item" 
                    ng-repeat="article in filteredArticles"> 
                    <strong>{{article.title}}</strong> 
                    (Flavor: {{article.flavor}},  
                    Rating: {{article.rating}}) 
                </li> 
            </ul> 
        </div> 
    </div> 
    <script> 
        var app = angular.module('myApp', []); 
        app.controller('myController', function ($scope) { 
            $scope.articles = [ 
                { title: 'AngularJS Introduction',  
                  flavor: 'Frontend',  
                  rating: 4.5 }, 
                { title: 'Node.js Basics',  
                  flavor: 'Backend',  
                  rating: 4.2 }, 
                { title: 'React vs. Angular Comparison',  
                  flavor: 'Frontend',  
                  rating: 4.8 }, 
                { title: 'JavaScript Fundamentals',  
                  flavor: 'Frontend',  
                  rating: 4.3 }, 
                { title: 'HTML5 and CSS3 Tutorial',  
                  flavor: 'Frontend',  
                  rating: 4.6 }, 
                { title: 'Python for Beginners',  
                  flavor: 'Backend',  
                  rating: 4.1 }, 
                { title: 'Data Structures in C++',  
                  flavor: 'Programming',  
                  rating: 4.7 }, 
                { title: 'Machine Learning with Python', 
                  flavor: 'AI',  
                  rating: 4.9 }, 
                { title: 'Web Development with React',  
                  flavor: 'Frontend',  
                  rating: 4.4 }, 
                { title: 'Java Programming Basics',  
                  flavor: 'Backend',  
                  rating: 4.0 }, 
                { title: 'C# for Beginners',  
                  flavor: 'Backend',  
                  rating: 4.2 }, 
                { title: 'Python Web Development',  
                  flavor: 'Backend',  
                  rating: 4.6 }, 
                { title: 'JavaScript Frameworks',  
                  flavor: 'Frontend',  
                  rating: 4.7 }, 
                { title: 'Advanced Machine Learning',  
                  flavor: 'AI',  
                  rating: 4.8 }, 
                { title: 'CSS Styling Techniques', 
                  flavor: 'Frontend',  
                  rating: 4.5 }, 
                { title: 'Algorithms and Data Structures',  
                  flavor: 'Programming',  
                  rating: 4.7 }, 
            ]; 
            $scope.filteredArticles = $scope.articles; 
            $scope.filter = {}; 
            $scope.$watchCollection('filter',  
                                     function (newVal, oldVal) { 
                $scope.filteredArticles =  
                  $scope.articles.filter(function (article) { 
                    return (!newVal.title ||  
                            article.title.toLowerCase(). 
                        includes(newVal.title.toLowerCase())) && 
                        (!newVal.flavor ||  
                          article.flavor.toLowerCase(). 
                            includes(newVal.flavor.toLowerCase())) && 
                        (!newVal.rating ||  
                         article.rating.toString().includes(newVal.rating)); 
                }); 
            }); 
        }); 
    </script> 
</body> 
  
</html>