Explain expressions and filters in AngularJS.
SOLUTION....
Expressions and Filters in AngularJS
1. AngularJS Expressions
Expressions in AngularJS are pieces of code written inside double curly braces {{ }}. They are used to bind data between the model (scope variables) and the view (HTML page).
Purpose: To display dynamic values or evaluate simple calculations directly in the HTML.
Features:
Can perform operations like addition, subtraction, string concatenation.
Can access variables and objects defined in the controller or scope.
Automatically update when the data in the model changes (two-way binding).
Example of Expression:
Output:
Addition: 30
Message: Hello AngularJS
Here, AngularJS automatically evaluates the expressions and updates the content in real time.
2. AngularJS Filters
Filters in AngularJS are used to format or transform data before displaying it to the user. They are applied using the pipe (|) symbol inside an expression.
Purpose: To make the displayed data more readable and user-friendly.
Usage: Can be used in bindings, directives like
ng-repeat, or in controllers/services.
Common Filters in AngularJS:
currency – Formats a number as currency.
Example:
{{ 2500 | currency }}→$2,500.00
date – Formats a date to a specific format.
Example:
{{ today | date:'fullDate' }}→ Monday, August 27, 2025
uppercase / lowercase – Converts text to uppercase or lowercase.
Example:
{{ 'angular' | uppercase }}→ ANGULAR
number – Formats a number with decimal places.
Example:
{{ 123.4567 | number:2 }}→ 123.46
limitTo – Limits the number of items or characters displayed.
Example:
{{ 'HelloWorld' | limitTo:5 }}→ Hello
orderBy – Sorts an array of items.
Example in
ng-repeat:
Output:
Original: angularjs
Uppercase: ANGULARJS
Today’s Date: Aug 27, 2025
Salary: ₹50,000.00