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);
}
});
The problem is with this line
<div ng-show={{quantityChanged}}>
You can't assign it in curly brackets, instead use double quotes
Like this
<div ng-show="quantityChanged">
Try this
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<span class="cart-header">Shopping Cart</span>
<div >
<div >
<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>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
$scope.quantityChanged = false;
$scope.cartItems = [{
Title: 'a',
Price: '20'
}];
$scope.updateToggle = function () {
$scope.quantityChanged = true; }
$scope.updateItem = function (cartItemID) {
console.log("Update Item " + cartItemID);
}
});
</script>
<p>The property "carname" was made in the controller, and can be referred to in the view by using the {{ }} brackets.</p>
</body>
</html>