I am learning Angularjs. I am trying to do some simple math, just to get the feel for Angular. I have two input fields, I want to put numbers in the those and then see the added total in a third field. As it is, the math gets all weird...some numbers it adds fine, other times it doesn't add at all, and other times the total is a random incorrect number. Any ideas? I feel like I am doing the $watch method wrong. Is there some way to watch two variables with one $watch?
HTML -
<td><input class="form-control" name="account"placeholder="Account"></td>
<td><input class="form-control" name="incomeone" ng-model="funding.startingEstimate"></td>
<td class="warning"></td>
<td>{{funding.startingEstimate}}</td>
<td class="warning">$500</td>
<td class="warning">50%</td>
</tr>
<tr>
<td><input class="form-control" value=""name="account"placeholder="Account"></td>
<td><input class="form-control" name="incometwo" ng-model="funding2.startingEstimate"></td>
<td class="warning"></td>
<td>{{funding2.startingEstimate}}</td>
<td class="warning">$500</td>
<td class="warning">50%</td>
</tr>
<tr>
<td><input class="form-control" placeholder="Account" ng-model="r.account"></td>
<td><input class="form-control" name="incometwo" placeholder="Budgeted"></td>
<td class="warning"></td>
<td></td>
<td class="warning">{{funding.needed}}</td>
<td class="warning">50%</td>
</tr>
Javascript
var app = angular.module('myApp', []);
function TodoCtrl($scope) {
$scope.funding = { startingEstimate: 0 };
$scope.funding2 = { startingEstimate: 0 };
computeNeeded = function(funding, funding2) {
$scope.funding.needed = $scope.funding.startingEstimate|0 + $scope.funding2.startingEstimate|0;
};
$scope.$watch('funding.startingEstimate', computeNeeded);
$scope.$watch('funding2.startingEstimate', computeNeeded);
}
This expression...
$scope.funding.startingEstimate|0 + $scope.funding2.startingEstimate|0
... actually is processed as this (because precedence of + operator is greater than of | one):
$scope.funding.startingEstimate|(0 + $scope.funding2.startingEstimate)|0
... that is, essentially, binary ORing two estimates. And results of binary OR can look really weird sometimes. )
Add parens to establish the order of operations you actually wanted, like this:
($scope.funding.startingEstimate|0) + ($scope.funding2.startingEstimate|0)
And, as @KevinB correctly noticed, you can just right this into an expression within the template:
<td>{{(funding.startingEstimate|0) + (funding2.startingEstimate|0)}}</td>
Ordering the operations correctly matters here as well, of course.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments