AngularJS - Filters: Your Friendly Guide to Data Transformation

Hello there, future coding superstar! ? Today, we're going to embark on an exciting journey into the world of AngularJS filters. Don't worry if you're new to programming – I'll be right here with you, explaining everything step by step. By the end of this tutorial, you'll be filtering data like a pro!

What Are Filters in AngularJS?

Before we dive into the specifics, let's understand what filters are. Imagine you have a magic wand that can instantly transform data. That's essentially what filters do in AngularJS! They take your data and present it in a different format without changing the original data. Cool, right?

Now, let's explore some of the most commonly used filters in AngularJS.

Uppercase Filter: Capitalizing on Greatness

What It Does

The uppercase filter does exactly what it sounds like – it converts all the characters in a string to uppercase.

How to Use It

<p>{{ "hello, world!" | uppercase }}</p>

Output

HELLO, WORLD!

Explanation

In this example, we start with the lowercase string "hello, world!". The | symbol is like a magic pipe that sends our text through the uppercase filter. The result? A loud and proud "HELLO, WORLD!".

Lowercase Filter: Keeping It Low-Key

What It Does

As you might guess, the lowercase filter does the opposite of uppercase – it converts all characters to lowercase.

How to Use It

<p>{{ "SHOUT OUT TO ANGULARJS!" | lowercase }}</p>

Output

shout out to angularjs!

Explanation

Here, we start with an all-caps string. The lowercase filter turns down the volume, giving us a more subtle "shout out to angularjs!".

Currency Filter: Show Me the Money!

What It Does

The currency filter formats a number as currency. By default, it uses the dollar sign, but you can customize it.

How to Use It

<p>{{ 9.99 | currency }}</p>
<p>{{ 9.99 | currency:"€" }}</p>

Output

$9.99
€9.99

Explanation

In the first line, we format 9.99 as US dollars. In the second line, we tell the filter to use the Euro symbol instead. Magic, isn't it?

Filter Filter: Finding Needles in Haystacks

What It Does

The filter... filter (yes, it's a bit confusing!) helps you search through arrays and return matching items.

How to Use It

<script>
$scope.friends = [
  {name:'John', age:25},
  {name:'Mary', age:28},
  {name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | filter:{name:'o'}">
  {{friend.name}}
</li>

Output

John

Explanation

Here, we're searching our friends array for names containing 'o'. Only John matches, so he's the only one displayed.

OrderBy Filter: Putting Things in Order

What It Does

The orderBy filter sorts an array based on one or more criteria.

How to Use It

<script>
$scope.friends = [
  {name:'John', age:25},
  {name:'Mary', age:28},
  {name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | orderBy:'age'">
  {{friend.name}} - {{friend.age}}
</li>

Output

John - 25
Mary - 28
Peter - 35

Explanation

In this example, we're sorting our friends by age in ascending order. If we wanted descending order, we could use '-age' instead.

Putting It All Together: A Grand Example

Now, let's combine multiple filters to see how powerful they can be together!

<script>
$scope.products = [
  {name:'Laptop', price:999.99},
  {name:'Smartphone', price:599.99},
  {name:'Tablet', price:299.99}
];
</script>

<input type="text" ng-model="searchText">
<table>
  <tr>
    <th>Name</th>
    <th>Price</th>
  </tr>
  <tr ng-repeat="product in products | filter:searchText | orderBy:'price'">
    <td>{{product.name | uppercase}}</td>
    <td>{{product.price | currency}}</td>
  </tr>
</table>

Explanation

1. We start with an array of products.
2. We create an input field that's bound to searchText using ng-model.
3. In our table, we use ng-repeat to iterate over our products.
4. We apply the filter filter to search based on searchText.
5. We then use orderBy to sort the results by price.
6. For each product, we display the name in uppercase and the price formatted as currency.

This example combines searching, sorting, and formatting all in one go!

Wrapping Up

Congratulations! You've just taken your first steps into the world of AngularJS filters. Remember, filters are like your data's personal stylist – they help present your information in the most appropriate and attractive way possible.

As you continue your journey with AngularJS, you'll discover even more ways to use filters to make your apps shine. Keep practicing, stay curious, and most importantly, have fun! Before you know it, you'll be creating amazing web applications that will wow everyone.

Happy coding, future AngularJS master! ?

Filter	Purpose	Syntax
uppercase	Converts string to uppercase	{{ expression
lowercase	Converts string to lowercase	{{ expression
currency	Formats number as currency	{{ expression
filter	Selects subset of items from array	{{ array
orderBy	Orders array by expression	{{ array

Credits: Image by storyset