Question

我有一个数量输入框，用户可以通过单击 - 和+按钮更改其值。问题是，如果我直接在输入框中输入值，我可以将此值解析为我的控制器。如果我通过单击按钮+或 - 来更改值，我无法将值解析为控制器，它始终保持旧值。任何人都可以帮助我吗？

<button
    onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value--;return false;"
    class="reduced items-count"
    type="button"
>
    <i class="fa fa-minus">&nbsp;</i>
</button>
<input
    type="text"
    class="input-text qty"
    title="Qty"
    maxlength="12"
    id="qty"
    name="qty"
    ng-init="qty='1'"
    ng-model="qty"
>
<button
    onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;"
    class="increase items-count"
    type="button"
>
    <i class="fa fa-plus">&nbsp;</i>
</button>

我的控制器，

$scope.$watch('qty', function (val) {
    if (val) {
        alert("qty2:" + val);
    }
});

Answer 1

我不太明白你想要实现什么，但你可以在按钮上使用ng-click来执行控制器中的某些功能。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.qty = 0;

  $scope.change = function(value) {
    $scope.qty += value;
    $scope.changed(); // execute after update
  }
  $scope.changed = function() {
    /* 
     Do what you want after the update, 
     but $scope.qty is dynamic anyway 
    */
    //alert("qty: " + $scope.qty);
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <div ng-app="myApp">
    <div ng-controller="myCtrl">

      <button ng-click="change(-1)" type="button">-</button>
      <input type="number" ng-model="qty" ng-change="changed()" />
      <button ng-click="change(1)" type="button">+</button>
      <br/>{{qty}}

    </div>
  </div>
</body>

</html>

Answer 2

这是完全错误的方法......永远不要在角度应用程序中使用dom方法。

使用ng-click修改ng-model属性。也始终遵循确保你在ng-model中有一个点的黄金法则

＆＃13;

angular
  .module('app', [])
  .controller('Ctrl', function($scope) {
  
    $scope.data = {
      qty: 0
    }

    $scope.updateQty = function(amt) {
      $scope.data.qty += amt
    }

  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <button ng-click="updateQty(-1)">-1</button>
  <input ng-model="data.qty">
  <button ng-click="updateQty(1)">+1</button>
</div>

＆＃13;

Angularjs从输入框到控制器的解析值

2 个答案: