I'm a beginner with AngularJS and I am facing an issue where my elements are not updating when specific values change via JavaScript. The changes only reflect when the values are manually entered or blurred in the input box.
You can find my simple example, derived from the Angular Dev Guide, here: http://jsfiddle.net/3R5wn/
<!-- Angular HTML -->
<div ng-app="">
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required id="myqty"></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
<button onclick="document.getElementById('myqty').value=document.getElementById('myqty').value*1+1;">Increment Qty</button>
In the Angular Controller JS:
//Angular Controller JS
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
The total updates when the user manually changes the values in the quantity/cost boxes, but it doesn't update when the "Increment" button is clicked. Can anyone provide a solution for this scenario without resorting to hacky methods?
Some additional notes:
- In my actual project, I plan to use a jQuery spinner widget for incrementing
- I will be using a custom function for calculations instead of a simple expression
- I believe that solving the issue in the provided example will apply to my use case with the spinner/custom function
BIG EDIT
This is the actual code I am working with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html ng-app="">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/excite-bike/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<script>
//inline JS here
$(function() {
var spinner = $( "#qtySpinner" ).spinner({
spin: function( event, ui ) {
qty++;
}
});
});
</script>
<title>Angular Testing</title>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b><br>
<br>
<table>
<tr>
<td>
Quantity
</td>
<td>
Cost
</td>
</tr>
<tr>
<td>
<input id="qtySpinner" type="integer" min="0" ng-model="qty" required="" ng-change="calculate(qty,cost);">
</td>
<td>
<input type="number" ng-model="cost" required="">
</td>
</tr>
</table>
<hr>
<b>Total:</b> {{calculate(qty,cost)}}
</div>
<br>
<b>Dummy Experimental Buttons</b>
<br>
<button onclick="alert($('#qtySpinner').val());$('#qtySpinner').val(10);">Set 10</button>
<button ng-click="qty++">Inc</button>
</body>
</html>
Javscript function:
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
$scope.calculate = function calculate(xval, yval) {
return xval * yval;
};
}