71 angularjs if else | ng if else | if else in AngularJs

In this blog post, I am going to share the code sample for AngularJs if else conditional expression.
Stayed Informed – Angular 2 ng-if else and Angular 2 ng-show

The AngularJs not provide the if(){}else{} functionality like others but we can achieve it by using the module. It is a collection of control flow directives i.e.

1. ng-if

2. ng-else-if and

3. ng-else

Stayed Informed - Get reliable managed cloud service provider for your IT infrastructure, on-premises or in the Cloud with support from class-leading experts, go to http://www.katalystpartners.com . Make your virtual machine more resilient with the latest Hyper–V virtual dedicated servers from Apps4Rent

Syntax:

<div ng-if="comp.code === 'CS'">
    {{comp.code}} - {{comp.name}}
</div>

Table of Contents
1. AngularJs code-sample
2. HTML 5 code-sample
3. Full Example code sample

Go and explore live output link on plnker..

JavaScript Code Sample

var app = angular.module('myApp', []);
    app.controller('mainController', function($scope) {
      $scope.comp = {
        code: 'CS',
        name: 'code-sample.com'
      };
    });

HTML Code Sample

<div ng-app="myApp">
  <div ng-controller="mainController">
    <h2>ng-if else in angularjs</h2>
    <hr/>
    <div>
      <div ng-if="comp.code === 'CS'">
            {{comp.code}}-{{comp.name}}
      </div>
      <div ng-if="comp.code === '' ">
            http://www.code-sample.xyz/
      </div>
    </div>
  </div>
</div>

Full Code Sample (Angular + HTML)

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.angularjs.org/1.4.12/angular.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('mainController', function($scope) {
      $scope.comp = {
        code: 'CS',
        name: 'code-sample.com'
      };
    });
  </script>
</head>

<body ng-app="myApp">
  <div ng-controller="mainController">
    <h2>ng-if else in angularjs</h2>
    <hr/>
    <div>
      <div ng-if="comp.code === 'CS'">
        If code is = <span style="color:green;">{{comp.code}}</span> , than company is = <a href="http://www.{{comp.name}}">{{comp.name}}</a>
      </div>
      <div ng-if="comp.code === '' ">
        code-sample.xyz
      </div>
    </div>
    <br/>
    <hr/>
    <a href="http://www.code-sample.com/2011/11/angularjs-tutorial-step-by-step.html" traget="_blank">For more...</a>
  </div>
</body>

</html>

The live demo Output link..

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2