$new() or $rootScope.new() in angularjs

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

Hello everyone, today’s I am going to share the code sample for AngularJs if else conditional expression.

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



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

About blogger..

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

Post a Comment
www.code-sample.com/. Powered by Blogger.