Home/ Questions/Q 9207105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T00:19:03+00:00

I’m new to AngularJS. I’m trying to make my elements update when specific values

  • 0

I’m new to AngularJS. I’m trying to make my elements update when specific values change, however changes aren’t being triggered when the values change via JS; they’re only happening when values are manually entered/blurred in the input box.

My simple example, branched from the Angular Dev Guide, is 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>

Angular Controller JS:

//Angular Controller JS
function InvoiceCntl($scope) {
   $scope.qty = 1;
   $scope.cost = 19.95;
}

Note that when the user changes values in the qty/price boxes manually (via keyboard), the total is updated. However, when the user clicks the “Increment” button, the total does not update.

Can anyone explain how to overcome this in my simple example? I’d like to avoid something too hacky, so is there a best practice for handling this kind of scenario?

Notes:

  • I’m planning to use a jQuery spinner widget to do the incrementing in my real-life example
  • I’ll be using a custom function to do calculations (vs. a simple expression)
  • I assume the solution to the simple solution above will translate to my spinner/custom function use case

BIG EDIT

Here’s the actual code I’m using (sorry, a closed network issue prevented me from posting in the first place):

    <!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 here:

function InvoiceCntl($scope) {
   $scope.qty = 1;
   $scope.cost = 19.95;
   $scope.calculate = function calculate(xval, yval) {
                        return xval * yval;
                    };
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Angular is built so that you don’t have to interact with the DOM. Instead, just put the calculation – as simple JavaScript – in an ng-click attribute:

    <button ng-click="qty++">Increment Qty</button>

    Alternatively, you can put a method on your $scope, which you can then call from within ng-click:

    function InvoiceCntl($scope) {
   $scope.qty = 1;
   $scope.cost = 19.95;
   $scope.increment = function () {
      $scope.qty++;
   };
}

    Then, in your view, just call that function:

    <button ng-click="increment()">Increment Qty</button>

    Update: To update the scope from outside the angular digest cycle, you have to first get a reference to the scope, make your changes, then manually call $digest, so that the view gets updated:

    var scope = angular.element('#qtySpinner').scope();
scope.qty++;
scope.$digest();
    • 0