Question

我正在尝试使用数字输入验证我的角形。我已经设置了我的数字输入（我没有包含在我的演示中），所以我使用stepUp（）和stepDown（）来增加和减少值。

这是我的演示：http://plnkr.co/edit/9aBCTI6hcCM0HhHimVnL?p=preview

form.numbah。$有效且当我使用stepUp（）/ stepDown（）递增/递减值时，数字的ng-model不会改变。

我想在数字输入发生变化时验证表格。

提前致谢！

angular.module('plunker', [])

.controller('MainCtrl', function($scope, $document) {
  $scope.numbah = -1;
  $scope.stepup = function(){
    document.getElementById("test-input").stepUp();
    // $scope.numbah++;
  };
  $scope.stepdown = function(){
    document.getElementById("test-input").stepDown();
    // $scope.numbah--;
  };
  $scope.change = function (value){
    alert(value);
    
  };
});

/* Styles go here */

input[type=number]{
  width: 40px;
}

div {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-controller="MainCtrl">
    <form>
      <p>Click stepdown/stepup buttons. You will see that form.numbah.$valid and numbah won't change</p>
      <p>But, If you click spin buttons inside number input, then everything works fine</p>
      <ng-form name="form">
      <input id="test-input" name="numbah" type="number" ng-model="numbah" min="1" max="3" />
      <div>form.numbah.$valid: {{form.numbah.$valid}}</div>
      <div>Value of number : {{numbah}}</div>
      <div>
      <input type="button" ng-click="stepup()" value="stepup">
      <input type="button" ng-click="stepdown()" value="stepdown">  
      </div>
      
      <div>form.$valid : {{form.$valid}}</div>
      </ng-form>
    </form>
    <script src="angular.js"></script>
    <script src="script.js"></script>
  </body>

</html>

AngularJS：当使用stepUp（）和stepDown（）递增数字时，数字输入模型和$ valid函数不起作用

0 个答案: