Search Posts

ng-change not working, AngularJS 1.x

AngularJS 1.59

When I edit the quantity input field the ng-change event doesn’t fire.

In Chrome Dev Tools I place a breakpoint on $scope.updateToggle and it is never hit.

I’ve looked at other posts on SO but cannot see what I’m doing wrong.

HTML:

@section scripts {
  <script src="@Url.Content("~/Binding/ViewModels/CartViewModel.js")"
      type="text/javascript"></script> }    
<br />
<span class="cart-header">Shopping Cart</span>

<div data-ng-app="appCart">
  <div ng-controller="CartViewModel">
    <div class="spinner-config" ng-show="viewModelHelper.isLoading">
      <i class="fa fa-spinner fa-spin"></i>
    </div>
    <span style="padding-left:600px"></span>
    <span class="cart-price-header">Price</span>
    <span class="cart-quantity-header">Quantity</span>
    <hr align="left" width="850px" class="cart-hr">
    <div ng-repeat="item in cartItems | orderBy:'Title'">
      <img class="cart-img" src="{{item.Image}}">
      <span class="cart-title">{{item.Title}}</span>
      <span class="cart-price">{{item.Price | currency:"$"}}</span>

     <input type="text" maxlength="3" class="cart-quantity"
         name="quantity" ng-model="item.Quantity" ng-change="updateToggle()">

      <div style="height:2px"></div>
      <button class="btn primary delete-btn"
              ng-click="deleteItem(item.CartItemId)">Delete</button>

      <div ng-show={{quantityChanged}}>
        <button class="btn primary update-btn"
                ng-click="updateItem(item.CartItemId)">Update</button>
      </div>

      <br />
      <div style="height:25px"></div>
      <hr align="left" width="850px" class="cart-hr">
    </div>
  </div>
  <br />
</div>

JavaScript:

appCartModule.controller("CartViewModel", function ($scope, $http, $timeout, viewModelHelper) {
  $scope.quantityChanged = false;

  $scope.updateToggle = function () {
    $scope.quantityChanged = true; }

  $scope.updateItem = function (cartItemID) {
    console.log("Update Item " + cartItemID);
  }

});

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.