Skip to content
Related Articles

Related Articles

AngularJS ng-copy Directive

Improve Article
Save Article
  • Last Updated : 08 Aug, 2022
Improve Article
Save Article

The ng-copy Directive in AngularJS is used to specify the custom behavior functions during the copy of the text in input text fields. It can be used when we want to call a function that will be triggered when the text is copied from the input field. It is supported by all input elements. The element’s original oncopy event will not be overridden with the ng-copy directive when both are executing.

Syntax:

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

Parameter:

  • expression: It specifies what to do when the element is copied.

Example 1: This example uses the ng-copy Directive to display a message when an element will copy. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-copy 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>
    <h2>ng-copy Directive</h2>
    <div ng-init="isCopy=false; copy='Copy this text!'">
        <textarea ng-copy="isCopy=true" ng-model="copy">
        </textarea><br>
        <pre>Copied status: {{isCopy}}</pre>
    </div>
</body>
</html>

Output:

 

Example 2: This example describes the use of the ng-copy Directive in AngularJS where it specifies that the number of times the given text will be copied, its total count will be displayed accordingly.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-copy 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>
    <h2>ng-copy Directive</h2>
    <p>Copy the "GeeksforGeeks" text</p>
    <input ng-copy="copy = copy + 1" 
           ng-init="copy=0" 
           value="GeeksforGeeks" />
    <p> {{copy}} times text copied.</p>
</body>
</html>

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!