AngularJS | ng-keyup Directive

In AngularJS, the ng-keyup directive is used to bind an event to the "keyup" JavaScript event.

Syntax

<input ng-keyup="expression">

Description

The ng-keyup directive is used to evaluate an AngularJS expression every time the "keyup" event is fired on the element that the directive is applied to.

The expression can be any valid AngularJS expression, including function calls, assignments and arithmetic operations. The value of the expression is evaluated in the context of the current scope.

Example

<input type="text" ng-model="name" ng-keyup="countChars()">
<p>You have typed {{ chars }} characters.</p>

$scope.chars = 0;
$scope.countChars = function() {
  $scope.chars = $scope.name.length;
};

This example binds an ng-model directive to a text input element and binds an ng-keyup directive to it as well. The countChars() function is called every time the user types a character into the input field. The chars variable is updated with the length of the name variable, which is bound to the input element using the ng-model directive. The updated value of chars is then displayed in a paragraph element below the input field.

Conclusion

The ng-keyup directive is a simple but powerful tool for binding events to elements in an AngularJS application. By using it in conjunction with other directives and expressions, you can create dynamic, responsive applications that react to user input in real time.