If else statement in AngularJS.

Revati S Misra 1149 17 Jun 2024

if else statement in AngularJS templates.

1 Answers

Ashutosh Patel 18 Jun 2024

If-else in AngularJS

In AngularJS, you typically use directives like ng-if, ng-show, and ng-switch to create condition statements directly in your HTML templates, rather than using traditional JavaScript if-else statements

Using ng-if
Removes or reconstructs a portion of the DOM tree based on the ng-if specification. It is often used to represent different things in a situation.

<div ng-if="condition">
   <!-- Content to show when condition is true -->
</div>

Using ng-show
ng-show Conditionally shows or hides objects based on the expression by removing them from the DOM.

<div ng-show="condition">
   <!-- Content to show when condition is true -->
</div>

Using ng-switch
ng-switch uses conditions to change the DOM structure based on the value.

<div ng-switch="value">
   <div ng-switch-when="case1">
       <!-- Content for case1 -->
   </div>
   <div ng-switch-when="case2">
       <!-- Content for case2 -->
   </div>
   <div ng-switch-default>
       <!-- Default content -->
   </div>
</div>

Using JavaScript if-else in AngularJS
AngularJS does not encourage the insertion of JavaScript if-else statements directly into templates for arguments. Instead, you need to prepare the necessary data or boolean expressions in your controller or component, and use the Angular instructions shown above to implement the conditional definition.

Example-

A simple AngularJS program shows how to use of ng-if directives.

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Focus input field Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body>
    <div data-ng-controller="MyController">
        <div>
            <p>Welcome to AngularJS Program!</p>
        </div>
        <div>
            <!-- text visible if IsLogin = false -->
            <p data-ng-if="!IsLogin">Please log in to continue.</p>
             <!-- text visible if IsLogin = true -->
            <p data-ng-if="IsLogin">Login Successfully.</p>
        </div>
        <!-- button for login and logout event -->
        <button data-ng-click="Login()">
            <!-- appear the text on button based on condition -->
            <span data-ng-if="IsLogin">Logout</span>
            <span data-ng-if="!IsLogin">Login</span>
        </button>
    </div>

    <script>
        angular.module("myApp", [])
        .controller("MyController", function($scope){
            $scope.IsLogin = false;

            // Login() when button click
            $scope.Login = function(){

                $scope.IsLogin = !$scope.IsLogin;
            }
        });

    </script>

</body>
</html>

In the example above

A variable IsLogin created within the controller and assigned a default value false.

Login() called when button is clicked that changes the value of IsLoginvariable.

data-ng-if checks the value of IsLogin, if the value is true then that HTML element is visible otherwise hide.

Also, Read: How to set focus on input field in AngularJS?

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

If else statement in AngularJS.

Can you answer this question?

1 Answers

If-else in AngularJS