Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

home / developersection / interviews / how do filters work in angularjs, and can you create a custom filter?
Ask Question
Ravi Vishwakarma
Ravi Vishwakarma

IT-Hardware & Networking

Ravi Vishwakarma is a dedicated Software Developer with a passion for crafting efficient and innovative solutions. With a keen eye for detail and years of experience, he excels in developing robust software systems that meet client needs. His expertise spans across multiple programming languages and technologies, making him a valuable asset in any software development project.

Message

1 Answers

Ravi Vishwakarma
Ravi Vishwakarma 30 Mar 2025
Report Abuse

Understanding Filters in AngularJS

Filters in AngularJS are used to format data before displaying it in the UI. They can be used in expressions, directives (ng-repeat, ng-model, etc.), and controllers.

1. Built-in Filters

AngularJS provides several built-in filters, such as:

Filter Name Description Example
currency Formats a number as currency `{{ price
date Formats a date `{{ dateVar
uppercase/lowercase Converts text to uppercase/lowercase `{{ name
limitTo Limits array/string length `{{ text
orderBy Sorts an array `ng-repeat="item in items
filter Filters an array based on a condition `ng-repeat="item in items

2. Creating a Custom Filter

You can create a custom filter using the .filter() method in an AngularJS module.

Example: Capitalize the First Letter

Step 1: Define the Filter

app.filter('capitalize', function() {
    return function(input) {
        if (!input) return '';
        return input.charAt(0).toUpperCase() + input.slice(1);
    };
});

Step 2: Use in HTML

<p>{{ 'hello world' | capitalize }}</p> 
<!-- Output: Hello world -->

3. Custom Filter with Parameters

You can pass additional arguments to a custom filter.

Example: Custom Filter to Append a String

Filter Definition

app.filter('append', function() {
    return function(input, suffix) {
        if (!input) return '';
        return input + suffix;
    };
});

Usage in HTML

<p>{{ 'Angular' | append:'JS' }}</p> 
<!-- Output: AngularJS -->

4. Custom Filter for Filtering Arrays

Filters can also modify arrays dynamically.

Example: Filter Even Numbers

Filter Definition

app.filter('evenNumbers', function() {
    return function(numbers) {
        return numbers.filter(num => num % 2 === 0);
    };
});

Usage in HTML

<ul>
    <li ng-repeat="num in [1,2,3,4,5,6] | evenNumbers">
        {{ num }}
    </li>
</ul>

5. Performance Consideration

  1. Avoid using filters inside ng-repeat for large lists, as they get re-evaluated every digest cycle. Instead, pre-process the data in the controller:
$scope.filteredItems = $filter('filter')($scope.items, searchText);
MindStick Training