forum

home / developersection / forums / how to use operators in angularjs with examples?

Ask Question
Anubhav Kumar

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 .

Follow
Can you answer this question?
Answer

1 Answers

Manish Sharma

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:

  1. Arithmetic Operators
  2. Comparison / Relational Operators
  3. Logical Operators
  4. Assignment Operators
  5. 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. 

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy