Understand AngularJS Filters with Examples

While explaining about AngularJS Features in one of my previous posts in the AngularJS section of this blog, I have discussed very briefly about Filters in AngularJS. Later in another post, I have explained using two different methods, on how to convert a string or a text to uppercase, using the “uppercase” filter in AngularJS.

An AngularJS Filter, modifies or transforms the data before passing the data to the view. We can use the filters in conjunction with AngularJS Expressions or Directives. In both cases, we must use a pipe “|”, which separates the filter with the expression or the directive.

For Example

<p> {{ bid | currency }} </p>

In the above example, I have declared an expression inside the curly braces, followed by an AngularJS filter called the currency. I’ll explain about this filter with other filters in this article, one by one.

Be advised, that Filters are case-sensitive. Therefore, you must carefully declare each filter in your web application.

* Using AngularJS “number” Filter

The filter number will format a given text and returns a numeric value. To prove our point, let’s see an example.

I have an <input> box that serves as the model. The view has an expression, which will display the values types in the <input> box. I want my users to type just numbers. However, by simply adding the expression in view won’t serve the purpose. Since, I have not applied any validation logic on the <input> box. Therefore, I have to use a filter with the expression.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
    <div ng-app>
        <p>
            <label>Enter a numberic value</label>
            <input type="text" ng-model="numberval" />
        </p>

        <p> {{ numberval | number }} </p>
    </div>
</body>
</html>

Try it

Now, it will not restrict the user from entering any value, such as alphabets in the box. However, the expression with the filter number will pick up and display numbers only. That is, you must enter numbers only to see the result where the expression (inside curly braces) is declared. Try adding alphabets, and even alpha-numeric values, and it will return nothing.

Filter “number” with Decimal values

If you want to display decimal values with the numbers, you can add a parameter to the filter. For example, I want to display two decimal values with numbers. This is how I’ll do it.

<p> {{ numberval | number:2 }} </p>

👉 See this Demo

Enter a numeric value

* Convert a Text to Uppercase Using AngularJS “uppercase” Filter

Use the uppercase filter to format a given text to upper case. If you have used CSS in your application, you must have come across text-transform property, which converts a text to either upper or lower case.

The uppercase filter in AngularJS is more efficient in this context. Therefore, I have covered this filter in detail, separately in another article. Please refer the below link.

Also Read: How to Transform Text to Uppercase in AngularJS?

<div ng-app>
        
    <p>
        <label>Enter your name (in lower case)</label>
        <input type="text" ng-model="yourname" />
    </p>

    <p> {{ yourname | uppercase }} </p>
</div>

Output

(it's an image)

AngularJS Filter uppercase

👉 How to convert a String or a text to UPPERCASE in AngularJS.

* Using AngularJS “lowercase” Filter

The AngularJS lowercase filter works the opposite of uppercase filter. Use the lowercase filter to an expression when you want to format the text values to lower case.

<div ng-app>
    <p>Enter your name <input type="text" ng-model="tbName" /></p>
    <p><input type="button" value="Lower Case" ng-click="name = tbName" /></p>

    <p> {{ name | lowercase }} </p>
</div>

← PreviousNext →

AngularJS Filters – Understand AngularJS Filters with Examples