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

【问题标题】：Angularjs Parse value from input box to controllerAngularjs将值从输入框解析到控制器
【发布时间】：2018-01-15 15:47:45
【问题描述】：

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

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

【问题讨论】：

这段代码真的很难读。如果可能，请至少创建一个Minimal, Complete, and Verifiable example

标签： html angularjs inputbox

【解决方案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>

【讨论】：

【解决方案2】：

这完全是错误的方法......永远不要在这样的角度应用程序中使用 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>

【讨论】：

应该加上type="number" 以防止串联