Ng-Switch-3

 

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