Description :
In this example there is a dropdown list with Show and Hide values. The dropdown list is bind with the array named temp. In the temp array there are two values Hide with ishide true and Show with ishide false value. ng- switch directive matches the value of ishide variable and when the value is true, the container with text Show Example will show and when the value of the ishide variable is false then container with text Hide Example will show and other will hide. The ng-switch directive matches the value using the ng-switch-when directive.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="switchExample">
<div ng-controller="ExampleController">
<div class="row">
<div class="col-md-3">
<select class="form-control" ng-model="ishide" ng-options="t.ishide as t.text for t in temp"></select>
</div>
<div ng-switch="ishide">
<div ng-switch-when="true" class="well col-md-3" style="background-color:AppWorkspace;">Show Example</div>
<div ng-switch-when="false" class="well col-md-3" style="background-color:salmon;">Hide Example</div>
</div>
</div>
</div>
<script>
var app = angular.module("switchExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.temp = [{ text: "Hide", ishide: true }, { text: "Show", ishide: false }];
}]);
</script>
</body>
</html>
Description :
In this example we have array named temp with the text value Textbox,Number.Checkbox, Radio and Select. The array is bind with the select list and the selected text bind the switch variable. ng-switch directive matches the values with the switch variable using ng-switch-when directive and if user select TextBox value from the select list then the Textbox will show and if select Checkbox from the select list then the checkbox will show.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="switchExample">
<div ng-controller="ExampleController">
<div class="row">
<div class="col-md-3">
<select class="form-control" ng-model="switch" ng-options="t.text as t.text for t in temp"></select>
</div>
<div ng-switch="switch" class="col-md-3">
<input ng-switch-when="TextBox" type="text" class="form-control" />
<input ng-switch-when="CheckBox" type="checkbox" class="form-control" />
<input ng-switch-when="Number" type="number" class="form-control" />
<input ng-switch-when="Radio" type="radio" class="form-control" />
<select ng-switch-when="Select" class="form-control"></select>
</div>
</div>
</div>
<script>
var app = angular.module("switchExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.temp = [{ text: "TextBox" }, { text: "CheckBox" }, { text: "Number" }, { text: "Radio" }, { text: "Select" }];
}]);
</script>
</body>
</html>
Description :
In this example the ng-switch directive match the values with the numbers entered. If we type numbers from 1 to 4 then the numbers will match with the ng-switch-when directive and entered number will show in the button with different background colors and if we enter any other number from 1 to 4 then the default section will execute by ng-switch-default directive.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app>
<div>
<div class="container">
<div class="row">
<div class="col-md-3">
Type Number(1-4) <input ng-model="number" type="number" class="form-control" />
</div>
<br />
<div ng-switch="number" class="col-md-3">
<div ng-switch-when="1" class="btn btn-danger">
{{number}}
</div>
<div ng-switch-when="2" class="btn btn-default">
{{number}}
</div>
<div ng-switch-when="3" class="btn btn-primary">
{{number}}
</div>
<div ng-switch-when="4" class="btn btn-warning">
{{number}}
</div>
<div ng-switch-default class="well">Default Section</div>
</div>
</div>
</div>
</div>
</body>
</html>
Description :
In this example we have three radio buttons for admin, user and visitor. The ng-switch directive is bind with the FrontEndUsers.status variable and for the matched values the message will show either Admin Section or User Section. For the default values Visitor Section message will show.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app>
<div>
<div class="container">
<form>
<label><input type="radio" value="admin" ng-model="FrontEndUsers.status"> Click For Admin</label>
<label><input type="radio" value="contributor" ng-model="FrontEndUsers.status"> Click For User</label>
<label><input type="radio" value="visitor" ng-model="FrontEndUsers.status"> Click For Visitor</label>
</form>
<hr>
<div ng-switch="FrontEndUsers.status" id="wrapper">
<div ng-switch-when="admin">
<h2> Admin Section</h2>
</div>
<div ng-switch-when="contributor">
<h2>User Section </h2>
</div>
<div ng-switch-default>
<h2> Visitor Section</h2>
</div>
</div>
</div>
</div>
</body>
</html>
Description :
In this example we have three tabs Angular, Jquery and bootstrap. By default tab variable has Angular value and ng-switch directive will match values for tab variable so by default Angular tab will open and when we click on the any other tab like on the Jquery tab then the value of tab variable becomes Jquery and Jquery tab will open.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.menu:hover {
background-color: white;
cursor: pointer;
height: 30px;
}
.menu {
height: 30px;
color: gray;
background-color: orange;
}
.active {
background-color: pink;
color: black;
}
.active:hover {
background-color: pink;
}
</style>
</head>
<body ng-app="switchExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="well col-md-11">
<div class="row">
<div class="col-md-1 menu" ng-class="{active: tab == 'Angular'}" ng-click="tab='Angular'"><b>Angular</b></div>
<div class="col-md-1 menu" ng-class="{active: tab == 'Jquery'}" ng-click="tab='Jquery'"><b>Jquery</b></div>
<div class="col-md-1 menu" ng-class="{active: tab == 'Bootstrap'}" ng-click="tab='Bootstrap'"><b>Bootstrap</b></div>
</div>
<div class="row" ng-switch="tab">
<div class="col-md-3" style="background-color:yellow" ng-switch-when="Angular">
<h3>Angular JS</h3><br />
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
</div>
<div class="col-md-3" style="background-color:yellow" ng-switch-when="Jquery">
<h3>Jquery</h3><br />
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.
</div>
<div class="col-md-3" style="background-color:yellow" ng-switch-when="Bootstrap">
<h3>Bootstrap</h3><br />
Bootstrap is a technique of loading a program into a computer by means of a few initial instructions which enable the introduction of the rest of the program from an input device.
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("switchExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.tab = 'Angular';
}]);
</script>
</body>
</html>
Description :
In this example we have a switch which is used for Yes No values or On and Off values. The ng-switch directive is bind with the $scope.val variable and by default value of this variable is true, so the switch has active class and switch is on. When you click on the switch it toggles and value of the $scope.val variable becomes false and switch will off.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
.active, .inactive {
font-size: 40px;
cursor: pointer;
}
.active, .inactive {
font-size: 40px;
cursor: pointer;
}
i.active {
color: green;
}
i.inactive {
color: maroon;
}
</style>
</head>
<body ng-app="switchExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="well" ng-switch="val">
<i class="fa fa-toggle-on active" ng-switch-when="true" ng-click="yesOrNo(val)"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-switch-when="false" ng-click="yesOrNo(val)"></i>
</div>
<pre>{{val}}</pre>
</div>
</div>
<script>
var app = angular.module("switchExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.val = true;
$scope.yesOrNo = function (val) {
$scope.val = !val;
}
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Switch, We are taking a scope variable isActive and on initialization we are setting its value ti active. And there are two button to change active and inactive selection Here is the sample html code to show hide div's using ng-switch
See the output:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
<div class="container">
<div class="row" ng-switch="isActive" ng-init="isActive='active'">
<div class="col-md-3"></div>
<div class="col-md-6 well text-center">
<div class="btn-group" style="margin-bottom:10px;">
<button class="btn btn-default btn-sm" ng-click="isActive='active'">Active</button>
<button class="btn btn-default btn-sm" ng-click="isActive='inactive'">InActive</button>
</div>
<div class="row text-left" ng-switch-when="active">
<div class="col-md-12">
<table class="table table-striped">
<tbody>
<tr>
<td>active</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.</td>
</tr>
<tr>
<td>active</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row text-left" ng-switch-when="inactive">
<div class="col-md-12">
<table class="table table-striped">
<tbody>
<tr>
<td>inactive</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.</td>
</tr>
<tr>
<td>inactive</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.</td>
</tr>
<tr>
<td>inactive</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
Description :
This is a very beautiful example of Ng-Switch, We are doing the calculator function like addition/Subtraction/multiplication/division. We have two text boxes where user input the value on which he/she want the calculation. See the example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
.button {
width: 100px;
height: 51px;
font-size: 30px;
}
.result {
background-color: #5CB85C;
height: 95px;
padding: 30px 0px;
font-size: 14px;
border-radius: 7px;
}
</style>
</head>
<body ng-app="">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="row well text-center">
<p>Enter Numbers and select operation</p>
<div class="col-md-6">
<input type="number" ng-model="firstNumber" class="form-control" placeholder="First Number" /><br />
<input type="number" ng-model="secondNumber" class="form-control" placeholder="Second Number" /><br />
<div ng-switch="operation">
<div class="result" ng-switch-when="add">{{firstNumber}} + {{secondNumber}} = {{result}}</div>
<div class="result" ng-switch-when="sub">{{firstNumber}} - {{secondNumber}} = {{result}}</div>
<div class="result" ng-switch-when="mul">{{firstNumber}} * {{secondNumber}} = {{result}}</div>
<div class="result" ng-switch-when="div">{{firstNumber}} / {{secondNumber}} = {{result}}</div>
</div>
</div>
<div class="col-md-6">
<button class="btn button btn-primary" ng-click="operation='add';result=firstNumber+secondNumber">+</button><br />
<button class="btn button btn-primary" ng-click="operation='sub';result=firstNumber-secondNumber">-</button><br />
<button class="btn button btn-primary" ng-click="operation='mul';result=firstNumber*secondNumber">*</button><br />
<button class="btn button btn-primary" ng-click="operation='div';result=firstNumber/secondNumber">/</button>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</body>
</html>