<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>AngularJS calculator</h1>
<div ng-controller="CalculatorCtrl">
<table>
<tr>
<td>a =</td>
<td><input ng-model="a"></td>
<td>
<button class="command" ng-click="inca()">+1</button>
<button class="command" ng-click="deca()">-1</button>
</td>
</tr>
<tr>
<td>b =</td>
<td><input ng-model="b"></td>
<td>
<button class="command" ng-click="incb()">+1</button>
<button class="command" ng-click="decb()">-1</button>
</td>
</tr>
<tr>
<td>operation:</td>
<td>
<select ng-model="operation">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
</table>
<b class="result">{{na()}} {{operation}} {{nb()}} = {{calculate()}}</b>
</div>
</body>
</html>
// Code goes here
function CalculatorCtrl($scope) {
$scope.a = 0;
$scope.b = 0;
$scope.operation = '+';
$scope.na = function() {
return $scope.a - 0;
}
$scope.nb = function() {
return $scope.b - 0;
}
$scope.inca = function() {
$scope.a = $scope.na() + 1;
}
$scope.incb = function() {
$scope.b = $scope.nb() + 1;
}
$scope.deca = function() {
$scope.a = $scope.na() - 1;
}
$scope.decb = function() {
$scope.b = $scope.nb() - 1;
}
$scope.calculate = function() {
if($scope.operation == '+') {
return $scope.na() + $scope.nb();
}
if($scope.operation == '-') {
return $scope.a - $scope.b;
}
if($scope.operation == '*') {
return $scope.a * $scope.b;
}
if($scope.operation == '/') {
return $scope.a / $scope.b;
}
return "undef";
}
}
/* Styles go here */
.result {
color: #38F;
font-size: 36px;
}
.command {
cursor: pointer;
color: #00B;
font-size: 13px;
font-weight: bold;
}