Ng-Switch-1

 

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