Operators in AngularJS Expressions
In AngularJS, expressions can include various operators to perform calculations and manipulate data. These operators are similar to those found in JavaScript and can be used to perform arithmetic, logical, and comparison operations within AngularJS expressions.
Arithmetic Operators
Arithmetic operators are used to perform mathematical calculations.
| Operator | Description | Example | Result |
|---|---|---|---|
+ | Adds two numbers | {{ 5 + 5 }} | 10 |
- | Subtracts one number from another | {{ 10 - 5 }} | 5 |
* | Multiplies two numbers | {{ 4 * 3 }} | 12 |
/ | Divides one number by another | {{ 20 / 4 }} | 5 |
% | Returns the remainder of a division | {{ 10 % 3 }} | 1 |
Comparison Operators
Comparison operators are used to compare two values.
| Operator | Description | Example | Result |
|---|---|---|---|
== | Checks if two values are equal | {{ 5 == 5 }} | true |
!= | Checks if two values are not equal | {{ 5 != 4 }} | true |
=== | Checks if two values are equal and of the same type | {{ 5 === '5' }} | false |
!== | Checks if two values are not equal and/or not of the same type | {{ 5 !== '5' }} | true |
> | Checks if one value is greater than another | {{ 10 > 5 }} | true |
>= | Checks if one value is greater than or equal to another | {{ 10 >= 10 }} | true |
< | Checks if one value is less than another | {{ 5 < 10 }} | true |
<= | Checks if one value is less than or equal to another | {{ 5 <= 5 }} | true |
Logical Operators
Logical operators are used to combine or negate expressions.
| Operator | Description | Example | Result |
|---|---|---|---|
&& |
Returns true if both expressions are true | {{ true && false }} |
false |
! |
Negates an expression | {{ !true }} |
false |
Ternary Operator
The ternary operator is used to perform conditional evaluations.
| Operator | Description | Example | Result |
|---|---|---|---|
condition ? trueExpression : falseExpression |
Evaluates a condition and returns one of two values based on whether the condition is true or false | {{ isTrue ? 'Yes' : 'No' }} |
Yes if isTrue is true, otherwise No |
Example of Operators in AngularJS
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.a = 5;
$scope.b = 10;
$scope.isTrue = true;
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>Arithmetic Operators</h2>
<table border="1">
<tr><th>Expression</th><th>Result</th></tr>
<tr><td>{{ a + b }}</td><td>15</td></tr>
<tr><td>{{ a - b }}</td><td>-5</td></tr>
<tr><td>{{ a * b }}</td><td>50</td></tr>
<tr><td>{{ a / b }}</td><td>0.5</td></tr>
<tr><td>{{ a % b }}</td><td>5</td></tr>
</table>
<h2>Comparison Operators</h2>
<table border="1">
<tr><th>Expression</th><th>Result</th></tr>
<tr><td>{{ a == b }}</td><td>false</td></tr>
<tr><td>{{ a != b }}</td><td>true</td></tr>
<tr><td>{{ a === b }}</td><td>false</td></tr>
<tr><td>{{ a !== b }}</td><td>true</td></tr>
<tr><td>{{ a > b }}</td><td>false</td></tr>
<tr><td>{{ a >= b }}</td><td>false</td></tr>
<tr><td>{{ a < b }}</td><td>true</td></tr>
<tr><td>{{ a <= b }}</td><td>true</td></tr>
</table>
<h2>Logical Operators</h2>
<table border="1">
<tr><th>Expression</th><th>Result</th></tr>
<tr><td>{{ isTrue && false }}</td><td>false</td></tr>
<tr><td>{{ isTrue || false }}</td><td>true</td></tr>
<tr><td>{{ !isTrue }}</td><td>false</td></tr>
</table>
<h2>Ternary Operator</h2>
<table border="1">
<tr><th>Expression</th><th>Result</th></tr>
<tr><td>{{ isTrue ? 'Yes' : 'No' }}</td><td>Yes</td></tr>
</table>
</body>
</html>
Operators in AngularJS expressions allow for powerful and flexible data manipulation directly within the view templates, enhancing the functionality and interactivity of AngularJS applications.
Leave Comment