Angular js会在每次onkeyup动作之后检查输入框，看它是否满足一个条件

Angular js to check input box to see if it satisfies a condition after every onkeyup action?

本文关键字：是否 满足 条件 一个 输入 js onkeyup 检查 之后 Angular      更新时间：2023-09-26

所以我是angular js的新手，我理解能够实时输入和查看输出的直接优势，就像这个简单的例子:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">      </script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>

但是现在我想更进一步，检查用户是否在任何阶段输入数字4。如果是，我想输出一个简单的消息给用户。

我想这涉及到ng-if或ng-onkeyup，但是关于实现这些的文档很难理解，如果在这个领域有经验的人可以指导我正确的方向，我将非常感激。

谢谢

这里不需要keyup。一个简单的ng-if就可以了:

    <div ng-app="">
    <p>Name:
        <input type="text" ng-model="name">
    </p>
    <p>{{name}}</p>
        <div ng-if="name==4">You entered four. This is a relevant message to four</div>
</div>

玩得开心…!!

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">      </script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-show="name!='4'">{{name}}</p><span ng-show="name=='4'">You entered 4</span>
</div>
</body>
</html>

如果您想验证表单，可以使用ng-messages很好地完成。它不包括你的例子开箱即用，但我仍然认为这是你正在寻找的。

    <form name="userForm">
  <div class="field">
    <label for="name">Enter name:</label>
    <input 
    name="name"
    ng-model="name" 
    ng-minlength="5" 
    />
    <div ng-messages="userForm.name.$error">
      <div ng-message="minlength">
       This is to short
      </div>
    </div>
  </div>
  <input type="submit" />
</form>

其他答案也可以，但是它们给您的是一个非常具体的用例。

在更广泛的意义上，您可以使用函数 
$scope.$watch

在你的控制器中做一些"每次变量改变"的事情。

在你的例子中，你可以这样做:plunkr

记住使用$scope。$watch是一个非常昂贵的操作，所以只有当你真正需要对

进行常量检查时才应该使用它。

如果您正在寻找一个在实现中更动态的答案，我建议使用ng-change。

. html 

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">      </script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name" ng-change="isFour()"></p>
<p>{{name}}</p>
</div>
</body>
</html>

. js 

//proper controller declaration
$scope.isFour = function() {
    //if you want to check that the complete input equals 4
    if($scope.name == '4') {
        //do something...
    }
    //if you want to check if the last character was 4
    if($scope.name.slice(-1) == '4') {
        //do something...
    }
    //if you want to check if it contains 4 or not 
    if($scope.name.indexOf("4") > -1) {
        //do something...
    }
}

注意给ng-change的函数在每次修改输入框时执行，所以这是一个相当昂贵的解决方案。

相关文章：