Angular js 在每次 onkeyup 操作后检查输入框是否满足条件？

Question

所以我是 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，但是关于实现这些的文档很难理解，如果有这方面经验的人能指导我正确的方向，我将不胜感激。

谢谢

Answer 1

您在这里不需要键盘输入。一个简单的 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>

Answer 2

玩得开心..!!!

<!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>

Answer 3

以防万一您想要验证表单，这可以使用 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>

Answer 4

其他答案有效，但它们为您提供了一个非常具体的用例。

广义上，可以使用函数

$scope.$watch

在你的控制器中做一些事情"everytime that variable changes"。

在您的示例中，您可以执行类似 this plunkr

的操作

请记住，使用 $scope.$watch 是一项非常昂贵的操作，因此您应该仅在确实需要对某些内容进行持续检查时才使用它

Answer 5

如果您正在寻找在实施中更具动态性的答案，我建议您使用 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 的函数会在输入框的每次更改时执行，因此这是一个相当昂贵的解决方案。

Angular js 在每次 onkeyup 操作后检查输入框是否满足条件？

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

javascript

angularjs

model-view-controller

onkeyup

angular-ng-if