Ng-Switch-5

 

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