AngularJS Filters – Understand AngularJS Filters with Examples

  • In the above example, I have declared an expression inside the curly braces, followed by an AngularJS filter called the currency.
  • The filter number will format a given text and returns a numeric value.
  • However, the expression with the filter number will pick up and display numbers only.
  • If you want to display “decimal” values with the numbers, you can add a parameter to the filter.
  • Use the lowercase filter to an expression when you want to format the text values to lower case.

Here in this article I’ll explain about AngularJS Filtes and its usage with examples.

@theEncodeDna: Understand #AngularJS Filters with Examples ~
#webdevelopment #javascript #tutorials…

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.

&ltp> {{ bid | currency }} &lt/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.

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 &ltinput> box that serves as the model. The view has an expression, which will display the values types in the &ltinput> 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 &ltinput> box. Therefore, I have to use a filter with the expression.

Now, it will not restrict the user from entering any value, such as alphabets, in the &ltinput> 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.

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.

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.

(it’s an image)

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.

AngularJS Filters – Understand AngularJS Filters with Examples

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.