🔧 Using Filters in AngularJS
Format data directly in your templates using built-in or custom filters.
Filters in AngularJS allow you to transform data in templates. They can be applied to expressions using the pipe symbol |.
🧪 Basic Syntax
{{ expression | filterName:optionalParameter }}
For example:
{{ 1234.56 | currency:'₹' }}
Output: ₹1,234.56
🛠 Common Use Cases
- Display formatted dates using
date - Filter lists in
ng-repeatusingfilter - Limit output using
limitTo - Sort arrays with
orderBy
📋 Example – Filtering a List
<input type="text" ng-model="searchName" placeholder="Search name">
<ul>
<li ng-repeat="person in people | filter:searchName">
{{ person.name }}
</li>
</ul>
This filters the list of people by the name typed into the input field.
✨ Chaining Filters
You can apply multiple filters one after another:
{{ longText | limitTo:50 | uppercase }}
🧩 Filters Work With:
- Text formatting (e.g.
uppercase,lowercase) - Arrays (e.g.
orderBy,filter) - Numbers (e.g.
currency,number) - Dates (e.g.
date)


