AngularJS ng-cut Directive

Last Updated : 08 Aug, 2022

The ng-cut Directive in AngularJS is used to specify the custom behavior functions when the text in input fields is cut. It can be used when we want to call a function that will be triggered when the text is cut from the input field. It is supported by all input elements.

Syntax:

<element ng-cut="expression"> Contents... </element>

Parameter:

expression: It specifies what to do when the input is cut.

Example 1: This example uses the ng-cut Directive to display a message when cutting the input text element.

HTML

<!DOCTYPE html> <html> <head> <title>ng-cut Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">  </script> <style>  body {  text-align: center;  font-family: sans-serif;  }  h1 {  color: green;  }  </style> </head> <body ng-app style="text-align:center"> <h1>GeeksforGeeks</h1> <h3>ng-cut Directive</h3> <div ng-init="iscut=false;cut='Cut this text!'"> <textarea ng-cut="iscut=true" ng-model="cut"> </textarea><br> <pre>Cut status: {{iscut}}</pre> </div> </body> </html>

Output:

Example 2: This example implements the ng-cut Directive to display the number of times the message cuts from the input text element.

HTML

<!DOCTYPE html> <html> <head> <title>ng-cut Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">  </script> <style>  body {  text-align: center;  font-family: sans-serif;  }  h1 {  color: green;  }  </style> </head> <body ng-app=""> <h1>GeeksforGeeks</h1> <h3>ng-cut Directive</h3> <p>Cut the "GeeksforGeeks" text</p> <input ng-cut="cut = cut + 1" ng-init="cut=0" value="GeeksforGeeks" /> <p> {{cut}} times text cut.</p> </body> </html>