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 AI Tools Integration
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 Interviews How do filters work in AngularJS, and can you create a custom filter? – MindStick
Ask Question

1 Answers

ICSM Computer
ICSM Computer 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
Markdown for AI

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

Open .md