LearnKode

5 Example(s) of Ng-Copy-Ng-Paste


Description :

In this example we can set the value of isCopy,isPaste variables to true on ng-copy and ng-paste event respectively and display it below.By default value of these variables is false which is set in ng-init directive.


Ng-Copy-Ng-Paste Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div ng-init="isCopy=false;copyValue='Copy me!';isPaste=false">
        <span ng-hide="isCopy">Copy here: <input ng-copy="isCopy=true" ng-model="copyValue" /><br /></span>
        <span ng-show="isCopy"> paste here: <textarea ng-paste="isPaste=true" ng-model="abc"></textarea></span>
        <br />
        <pre>Copied: {{isCopy}}</pre>
        <pre>Paste: {{isPaste}}</pre>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we can set the value of isCopy=true on ng-copy event(when we copy the text from textbox) and display it below.By default value of isCopy variable is false which is set by ng-init directive.


Ng-Copy-Ng-Paste Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div ng-init="isCopy=false;textCopy='Copy me!'">
        Copy here: <input ng-copy="isCopy=true" ng-model="textCopy" /><br />
        <pre>Copied: {{isCopy}}</pre>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we can set the value of isCopy=true on ng-copy event(when we copy the text from tetxarea) and display it below.By default value of isCopy variable is false which is set by ng-init directive.


Ng-Copy-Ng-Paste Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div ng-init="isCopy=false;copyValue='Copy me!'">
        Copy here: <textarea ng-copy="isCopy=true" ng-model="copyValue"></textarea>
        <br />
        <pre>Copied: {{isCopy}}</pre>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we can set the value of isPaste=true on ng-paste event(when we paste the text to textbox) and display it below.By default value of isPaste variable is false which is set by ng-init directive.


Ng-Copy-Ng-Paste Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div ng-init="isPaste=false">
        Paste here: <input ng-paste="isPaste=true" /><br />
        <pre>pasted: {{isPaste}}</pre>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we can set the value of isPaste=true on ng-paste event(when we paste the text to textarea) and display it below.By default value of isPaste variable is false which is set by ng-init directive.


Ng-Copy-Ng-Paste Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div ng-init="isPaste=false">
        Paste here: <textarea ng-paste="isPaste=true"></textarea>
        <br />
        <pre>pasted: {{isPaste}}</pre>
    </div>
</body>
</html>
Try it » Download Example »

Output