ng-change 不工作，AngularJS 1.x

Question

AngularJS 1.59

当我编辑 quantity 输入字段时，ng-change 事件没有触发。

在 Chrome Dev Tools 中，我在 $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

首先在您的 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; 
   }
}

Answer 2

问题出在这一行

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

您不能在 curly brackets 中分配它，而是使用 double quotes

像这样

<div ng-show="quantityChanged">

试试这个

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

ng-change 不工作，AngularJS 1.x

ng-change not working, AngularJS 1.x

angularjs

angularjs-directive

angularjs-ng-change