Question

AngularJS 1.59

当我修改quantity输入字段时，ng-change事件无法触发。

在Chrome开发工具中，我在$scope.updateToggle上放置了一个断点，它永远不会被击中。

我已经查看了SO上的其他帖子，但看不出我做错了什么。

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);
  }

});

Answer 1

问题在于这一行

<div ng-show={{quantityChanged}}>

您无法在curly brackets中分配，而是使用double quotes

喜欢这个

<div ng-show="quantityChanged">

试试这个

＆＃13;

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

＆＃13;

Answer 2

首先在你的html代码中更改：

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

在控制器中这样做：

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

ng-change无效，AngularJS 1.x

2 个答案: