<!DOCTYPE html>
<html>
<head>
<title>AngularJS Conditional directive ng-if and ng-switch with example</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
<script src="script.js"></script>
<style>hr{padding:30px 0;}</style>
</head>
<body>
<!-- Main Content -->
<div class="container" ng-app="demoLearningTurn">
<div class="content" ng-controller="mainCtrl">
<h1>AngularJS Conditional directive ng-if</h1>
<label>Checked/Unchecked to show/Hide Text</label>
<input type="checkbox" ng-model="txtStatus"></br>
<input type="button" onclick="changeBg();" value="Change Text Background"></br>
<p ng-if="txtStatus" id="demo-text" style="border: 5px solid #000; padding:10px;">LearningTurn Demo Text</p>
<hr/>
<h1>AngularJS Conditional directive ng-switch</h1>
<select ng-model='txtOption' ng-options="key as label for (key, label) in txtOptions">
</select>
<br/><br/>
<div ng-switch on="txtOption">
<p ng-switch-when="1" style="border: 5px solid #000; padding:10px;">Text Paragraph First</p>
<p ng-switch-when="2" style="border: 5px solid #000; padding:10px;">Text Paragraph Second</p>
<p ng-switch-when="3" style="border: 5px solid #000; padding:10px;">Text Paragraph Third</p>
<p ng-switch-default style="border: 5px solid #000; padding:10px;">Text Paragraph Default</p>
</div>
</div>
</div>
<p><center>Tutorial: <a href="http://learningturn.com/angular-js/angularjs-conditional-directive-ng-if-and-ng-switch-with-example/">AngularJS Conditional directive ngIf and ngSwitch with example</center></p>
</body>
</html>
function changeBg() {
$("#demo-text").css("background-color", "blue");
}
// Create AngularJS application
var app = angular.module('demoLearningTurn',[]);
// Create Controller with name mainCtrl
app.controller('mainCtrl', function($scope){
$scope.txtOptions = {
'1': 'Text Paragraph First',
'2': 'Text Paragraph Second',
'3': 'Text Paragraph Third',
'4': 'Text Paragraph Default'
};
});