Ng-Switch-2

 

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