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

Posted 2023-03-29

【中文标题】如何使用 angularjs 比较输入字段中的两个数字？

【英文标题】：How can i compare two numbers inside input field using angularjs?

【发布时间】：2016-05-04 07:55:28

【问题描述】：

我正在尝试匹配两个随机生成的数字。如果结果输入错误，我想添加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)...

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

【问题讨论】：

我认为你应该使用两种方式的数据绑定

【参考方案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>

【讨论】：

感谢分享知识，解释得很好，但是我们可以添加 ng-invalid 类而不是 alert("not equal");

你想在哪里添加类？

在相同的输入上，但我没有使用 jquery，所以可以使用 angularjs 添加类。谢谢你指导我

这仍然不是很棱角分明；）我建议使用 ng-class 或自定义验证器（在这种情况下似乎有点过分）。为努力+1

@Aaron 感谢您的关注，请您解释一下。

【参考方案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。

【讨论】：

我可以扩展自定义验证，但我不精通验证器和指令，所以我认为最好阅读文档