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

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

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

使用ng-click修改ng-model属性。还要始终遵循确保在 ng-model

中有一个点的黄金法则

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

    $scope.updateQty = function(amt) {
      $scope.data.qty += amt
    }

  })

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

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

Angularjs Parse value from input box to controller

html

inputbox

angularjs