Ng-Switch-8

 

This is a very beautiful example of Ng-Switch, We are doing the calculator function like addition/Subtraction/multiplication/division. We have two text boxes where user input the value on which he/she want the calculation. See the example:

 
 
 
<!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"> <style type="text/css"> .button { width: 100px; height: 51px; font-size: 30px; } .result { background-color: #5CB85C; height: 95px; padding: 30px 0px; font-size: 14px; border-radius: 7px; } </style> </head> <body ng-app=""> <div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <div class="row well text-center"> <p>Enter Numbers and select operation</p> <div class="col-md-6"> <input type="number" ng-model="firstNumber" class="form-control" placeholder="First Number" /><br /> <input type="number" ng-model="secondNumber" class="form-control" placeholder="Second Number" /><br /> <div ng-switch="operation"> <div class="result" ng-switch-when="add">{{firstNumber}} + {{secondNumber}} = {{result}}</div> <div class="result" ng-switch-when="sub">{{firstNumber}} - {{secondNumber}} = {{result}}</div> <div class="result" ng-switch-when="mul">{{firstNumber}} * {{secondNumber}} = {{result}}</div> <div class="result" ng-switch-when="div">{{firstNumber}} / {{secondNumber}} = {{result}}</div> </div> </div> <div class="col-md-6"> <button class="btn button btn-primary" ng-click="operation='add';result=firstNumber+secondNumber">+</button><br /> <button class="btn button btn-primary" ng-click="operation='sub';result=firstNumber-secondNumber">-</button><br /> <button class="btn button btn-primary" ng-click="operation='mul';result=firstNumber*secondNumber">*</button><br /> <button class="btn button btn-primary" ng-click="operation='div';result=firstNumber/secondNumber">/</button> </div> </div> </div> <div class="col-md-4"></div> </div> </div> </body> </html>
Output