Open In App

AngularJS ng-cut Directive

Improve
Improve
Like Article
Like
Save
Share
Report

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


Output:

 



Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads