forum

Home / DeveloperSection / Forums / If else statement in AngularJS.

Ask Question
Revati S Misra

Revati S Misra

Follow
Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

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 IsLogin variable.

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?

MindStick Training

Liked By