Ng-Switch-4

 

In this example we have three radio buttons for admin, user and visitor. The ng-switch directive is bind with the FrontEndUsers.status variable and for the matched values the message will show either Admin Section or User Section. For the default values Visitor Section message 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> <div> <div class="container"> <form> <label><input type="radio" value="admin" ng-model="FrontEndUsers.status"> Click For Admin</label> <label><input type="radio" value="contributor" ng-model="FrontEndUsers.status"> Click For User</label> <label><input type="radio" value="visitor" ng-model="FrontEndUsers.status"> Click For Visitor</label> </form> <hr> <div ng-switch="FrontEndUsers.status" id="wrapper"> <div ng-switch-when="admin"> <h2> Admin Section</h2> </div> <div ng-switch-when="contributor"> <h2>User Section </h2> </div> <div ng-switch-default> <h2> Visitor Section</h2> </div> </div> </div> </div> </body> </html>
Output