如何使用 angularjs 比较输入字段中的两个数字？

Question

我正在尝试匹配两个随机生成的数字。如果结果输入错误，我想添加ng-invalid 类。在控制器中，此函数正在生成数字。

AngularJs

    $scope.getRandomSpan = function(){
            return Math.floor((Math.random()*6)+1);
}

HTML

<span ng-init="a=getRandomSpan()">{{ a }}</span>
<span ng-init="b=getRandomSpan()"> + {{ b }}</span>

一旦用户在输入字段中输入数字，我想验证数字。

<input type="number" ng-model="captcha" required />

例如函数生成两个数字 2 和 3 (equal to 5)，现在我想添加 ng-invalid 类，如果输入的数字不等于 5。我已经在控制器中完成了这个任务，它在提交表单后进行验证。

var random =  $scope.a + $scope.b;
var enteredcaptcha =  $scope.captcha;
if(random == enteredcaptcha){...}

但我不知道如何现场验证，任何人都可以指导我，我将不胜感激。感谢您的指导

Answer 1

我已经更新了我的代码，如果你输入正确的值，它会显示消息，否则什么都不会发生

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.getRandomSpan = function() {
    return Math.floor((Math.random() * 6) + 1);
  }
  $scope.$watch("captcha", function() {
    var random = $scope.a + $scope.b;
    var enteredcaptcha = $scope.captcha;
    if (enteredcaptcha) {
      var myEl = angular.element(document.querySelector('#ans'));
      if (random == enteredcaptcha) {
        myEl.addClass("ng-valid").removeClass("ng-invalid");
      } else {
        myEl.addClass("ng-invalid").removeClass("ng-valid");
      }
    }
  });
});

#ans {
  display: none;
}

.ng-invalid{
  display:none !important;
}

.ng-valid{
  display:inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <span ng-init="a=getRandomSpan()">{{ a }}</span>
  <span ng-init="b=getRandomSpan()"> + {{ b }}</span>
  <input type="number" ng-model="captcha" />
  <span id="ans">excellent!!!!</span>
</div>

Answer 2

要对元素有条件地设置类，您可以使用ngClass directive。它接受 3 种不同的语法，但最简单的一种是：

<input type="number" ng-model="captcha" required ng-class="{'ng-invalid': a+b!=captcha, 'ng-valid': a+b==captcha}"/>

我假设a、b 和captcha 可以从input 的范围内访问。

当然，由于您要添加的类是ng-invalid，因此您正在尝试进行表单验证。一种更综合的方法是使用 angular 的custom validation。