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