I am able to do it with text-box and the dropdownlist but what i need is to create a calculator using a text but i am not able to enter the button values to the text-box
Here is my index.html
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<h1>Simple Calculator</h1>
<div ng-app="myApp">
<div ng-controller="calculatorCtrl">
<div class="offset4 span6 well">
<label>Enter a value :</label>
<input ng-model="firstNumber" type="text"> <br/><br>
<label>Another Value:</label>
<input ng-model="secondNumber" type="text"> <br/><br>
<label>Operator:</label>
<select ng-model="selectedOperator"
ng-options="operator for operator in operators"></select>
<br><br>
<button ng-model="btn1" class="numberbutton" value="1" ng-click='updateOutput(1)'>1</button>
<button name="btn2" class="numberbutton" value="2" ng-click='updateOutput(2)'>2</button>
<button name="btn3" class="numberbutton" value="3" ng-click='updateOutput(3)'>3</button>
<button name="btn0" class="numberbutton" value="0" ng-click='updateOutput(0)'>0</button>
<br>
<button name="btnPlus" class="operationbutton" ng-click='add()'>+</button>
<button name="btnMinus" class="operationbutton" ng-click='subtract()'>-</button>
<button name="btnEquals" class="operationbutton" ng-click='calculate()'>=</button>
<button ng-click="calculate()">Calculate</button> <br><br>
Result: {{result}}
</div>
</div>
</div>
</body>
</html>
And my here is my js file:
script.js
var myApp = angular.module('myApp', []);
myApp.controller('calculatorCtrl',function ($scope) {
$scope.operators = ['+', '-', '*', '/'];
$scope.selectedOperator = $scope.operators[0];
$scope.updateOutput = function (btn) {
if ($scope.output == "0" || $scope.newNumber) {
$scope.output = btn;
$scope.newNumber = false;
} else {
$scope.output += String(btn);
}
$scope.pendingValue = toNumber($scope.output);
};
$scope.calculate = function() {
var A = parseInt($scope.firstNumber);
var B = parseInt($scope.secondNumber);
var C = 0;
switch ($scope.selectedOperator) {
case '+':
C = A + B;
break;
case '-':
C = A - B;
break;
case '*':
C = A * B;
break;
case '/':
C = A / B;
break;
}
$scope.result = C;
}; });
I not sure where is problem, but possibly you simple confusing with angular.
You already have to string associated with numbers: firstNumber and secondNumber, so on button click you simple need add button value to focused textbox model.
I change your sample, possible this snippet can help
var myApp = angular.module('myApp', []);
myApp.controller('calculatorCtrl', function($scope) {
function add(x, y) {
return x + y;
}
function sub(x, y) {
return x - y;
}
function mul(x, y) {
return x * y;
}
function div(x, y) {
return x / y;
}
function calc(op, x, y) {
return $scope.operators[op](parseInt(x, 10), parseInt(y));
}
$scope.operators = {
'+': add,
'-': sub,
'*': mul,
'/': div
};
$scope.op = '+';
$scope.calc = calc;
});<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<h1>Simple Calculator</h1>
<div ng-app="myApp">
<div ng-controller="calculatorCtrl" ng-init='isNotTBFocused=true'>
<div class="offset4 span6 well">
<label>Enter a value :</label>
<input ng-model="firstNumber" type="text" ng-focus='isNotTBFocused="firstNumber"'>{{(isNotTBFocused==="firstNumber")?'!':''}}
<br/>
<br>
<label>Another Value:</label>
<input ng-model="secondNumber" type="text" ng-focus='isNotTBFocused="secondNumber"'>{{(isNotTBFocused==="secondNumber")?'!':''}}
<br/>
<br>
<label>Operator:</label>{{ op }}
<br>
<br>
<button ng-repeat="n in [1,2,3,4,5,6,7,8,9,0]" ng-click='$parent[isNotTBFocused]=$parent[isNotTBFocused]+""+n' ng-disabled='isNotTBFocused===true'>{{n}}</button>
<br>
<button ng-repeat="(key,val) in operators" ng-click="$parent.op=key" ng-disabled='isNotTBFocused===true'>{{key}}</button>
<button ng-click="result=calc(op,firstNumber,secondNumber)">=</button>
<br>
<br>Result: {{result}}
</div>
</div>
Here is how I would do it angular style
Controller :
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('calculatorCtrl',function ($scope) {
$scope.txt = '';
$scope.numbers = [];
$scope.operators = [];
$scope.calculate = function() {
var sum = 0;
while($scope.operators.length > 0){
var right = $scope.numbers.pop();
if(isNaN(right)){
right = 0;
}
var left = $scope.numbers.pop();
if(isNaN(left)){
left = 0;
}
var op = $scope.operators.pop();
sum += calc(left,right,op);
}
$scope.result = sum;
$scope.numbers = [];
$scope.operations = [];
$scope.txt = '';
};
$scope.addNumber=function(num) {
$scope.txt+= num;
$scope.numbers.push(parseInt(num));
};
$scope.addOperator = function(operator){
$scope.txt+= operator;
$scope.operators.push(operator);
}
function calc(lhs,rhs,op){
switch(op){
case '+':
return lhs+ rhs;
case '-':
return lhs-rhs;
}
return 0;
}
});
And the view
<h1>Simple Calculator</h1>
<div ng-app="myApp">
<div ng-controller="calculatorCtrl">
<div class="offset4 span6 well">
<label>Enter a value :</label>
<input type="button" value="1" name="no" ng-click="addNumber('1')">
<input type="button" value="2" name="no" ng-click="addNumber('2')">
<input type="button" value="3" name="no" ng-click="addNumber('3')">
<input type="button" value="0" name="no" ng-click="addNumber('0')">
<input type="button" value="-" name="no" ng-click="addOperator('-')">
<input type="button" value="+" name="no" ng-click="addOperator('+')"><br> <br>
<button ng-click="calculate()">Calculate</button> <br><br>
<button ng-click="numbers = []; txt=0;">Clear</button> <br><br>
Result: {{result}} </div>
</div>
</div>