AngularJs conditional directive

Conditional Rendering as the name itself is describing here the conditional rendering is like rendering of the HTML DOM based on the state of the data model i.e.

if, else if, else conditions. The same will be covered in further ng-show and ng-hide directives sections.

I am using angular if else and trying to explain in detail about it.

Example,

<!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>
  </div>
</body>

</html>

The Result looks like,

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

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book