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，因此您尝试进行表单验证。更加综合的方法是使用角度custom validation。

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

AngularJs

HTML

2 个答案: