Ng-Switch-7

 

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