Search code examples
javascriptangularjsmodel-view-controlleronkeyupangular-ng-if

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

So I am new to angular js and I understand the immediate advantage of being able input and view output seemingly in real time like this simple example:

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

But now I would like to go one further and check if the user at any stage inputs say, the number 4. and if so, I'd like to output a simple message to the user.

I imagine this involves either ng-if or ng-onkeyup but the documentation about implementing these is hard to understand and I would greatly appreciate if someone with experience in this field could guide me in the right direction.

thanks

Solution

  • You will not need keyup here. A simple ng-if will do the trick for you:

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