How to use Operators in AngularJS with examples?

Anubhav Sharma 749 13 May 2024

How to use Operators in AngularJS with examples?

Anubhav Sharma

Student

The Anubhav portal was launched in March 2015 at the behest of the Hon'ble Prime Minister for retiring government officials to leave a record of their experiences while in Govt service .

1 Answers

Manish Sharma 14 May 2024

AngularJS Operators

In AngularJS, you can use operators within expressions to perform various operations, such as arithmetic, comparison, logical, and string manipulation.

Here are some common operators you can use:

Arithmetic Operators
Comparison / Relational Operators
Logical Operators
Assignment Operators
Conditional Operator

Arithmetic Operators: AngularJS supports standard arithmetic operators like addition (+), subtraction (-), multiplication (*), division (/), and modulus (%).

Example –

    <div class="container" >
        {{ 5 + 3 }} <!-- Output: 8 -->
        {{ 10 - 4 }} <!-- Output: 6 -->
        {{ 2 * 3 }} <!-- Output: 6 -->
        {{ 10 / 2 }} <!-- Output: 5 -->
        {{ 10 % 3 }} <!-- Output: 1 -->
    </div>

Comparison / Relational Operators: These operators are used to compare two values and return a boolean result. AngularJS supports comparison operators like equal to (==), not equal to (!=), strict equal to (===), strict not equal to (!==), greater than (>), less than (<), greater than or equal to (>=), and less than or equal to (<=).

Example –

    <div class="container">
        {{ 5 == 5 }} <!-- Output: true -->
        {{ 10 != 5 }} <!-- Output: true -->
        {{ 5 === '5' }} <!-- Output: false -->
        {{ 5 !== '5' }} <!-- Output: true -->
        {{ 10 > 5 }} <!-- Output: true -->
        {{ 5 < 10 }} <!-- Output: true -->
        {{ 10 >= 10 }} <!-- Output: true -->
        {{ 5 <= 10 }} <!-- Output: true -->
    </div>

Logical Operators: AngularJS supports logical operators like logical AND (&&), logical OR (||), and logical NOT (!).

Example –

    <div class="container">
        {{ true && false }} <!-- Output: false -->
        {{ true || false }} <!-- Output: true -->
        {{ !true }} <!-- Output: false -->
    </div>

Assignment Operators: AngularJS supports the standard assignment operator (=).

Example –

        {{ x = 5 }} <!-- Assigns 5 to x -->
        {{x = 10}}
        {{x}}

String Concatenation Operator: AngularJS uses the '+' operator for string concatenation.

Example –

{{ 'Hello, ' + 'world!' }} <!-- Output: Hello, world! -->

Conditional Operator: The conditional operator (also known as the ternary operator) in AngularJS is a concise way to write conditional statements. It's often used as a shorthand for simple if-else statements. In AngularJS, you can use the conditional operator within expressions to conditionally display content or assign values based on a condition.

Syntax –

condition ? expression1 : expression2

If condition evaluates to true, expression1 is executed.
If condition evaluates to false, expression2 is executed.

Example -

<!DOCTYPE html>
<!-- define root module -->
<html lang="en" data-ng-app="myModule">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- attach the bootstrap 5.3.3 library -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- attach the angular js library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>

    <!-- access the ArithmaticController as ac for my child nodes -->
    <div class="container border" data-ng-controller="ArithmaticController as ac">
        <p class="fw-bold">Arithmatic Operators </p>
        <div>
            <p>{{ac.x + ac.y}}</p> <!-- solve this calculation using angular js expration -->
            <p data-ng-bind="ac.y-ac.x"></p> <!-- solve this calculation using angular js bind directive -->
            <p>ac.x * ac.y = {{ac.x*ac.y}}</p> <!-- solve this calculation using angular js expration with some fix text -->
            <p data-ng-bind="'ac.y * ac.x = ' + (ac.y / ac.x)"></p> <!-- solve this calculation using angular js bind directive with fix text -->
            <p>
                <span>ac.y % ac.x = </span>
                <span data-ng-bind="ac.y % ac.x"></span>
            </p>
        </div>

        <!-- I am create an iteration or operators for evaluate the expretions -->
        <div class=" ">
            <hr>
            <!-- show x and y values only using the angular expretions -->
            <span>ac.x = {{ac.x}}, ac.y = {{ac.y}}</span>
            <hr>
            <!-- create a loop or iterations of 'operators'  -->
            <div class="" data-ng-repeat="operator in ac.operators" > <!-- this statement iterate over an array of operators -->
                <span>
                    ac.x <!-- print the variable name -->
                    <span data-ng-bind="operator" class="text-danger fw-bold"></span> <!-- bind the operator using bind directive -->
                    ac.y <!-- print the variable name -->
                     =>  <!-- print the '=>'  -->
                    {{ac.evaluate('' + ac.x + operator + ac.y + '')}} <!-- call evaluate() using controller 'ac'  -->
                </span>
            </div>
        </div>
    </div>
    <!-- Access the ConditionalController  -->
    <div class="container" ng-controller="ConditionalController">
        <div>
            <p data-ng-bind="isMorning"></p>
            <!-- Conditional operator binding -->
            <p ng-bind="isMorning ? 'Good morning!' : 'Good day!'"></p>
        </div>
    </div>

    <script>
        // Create 'myModule' for my angular js program, it's handle the internal request
        var app = angular.module("myModule", [])
        .controller('ArithmaticController', function($scope){ // Create 'ArithmaticController' controller 
            var ac = this;
            ac.x = 10;
            ac.y = 51;
            //define the array of operator 
            ac.operators = ['+', '-', '/', '%', '*', '==', '===', '>', '>=', '<', '<=', '&&', '&', '||', '|']; 
            //this function return the 'expration' result after evaluating
            ac.evaluate = function(expration){
                return eval(expration);
            };
        })
        .controller('ConditionalController', function ($scope) {
            var currentTime = new Date().getHours();
            $scope.isMorning = currentTime < 12;
        });
    </script>

</body>
</html>

Thank You,

I hope you understand with “operators” in AngulaJS.

forum

How to use Operators in AngularJS with examples?

Can you answer this question?

1 Answers

AngularJS Operators