Post
Ask Question

Cut and Copy Events in AngularJS

Introduction
This article explains how to use the Copy and Cut events in AngularJS. The Cut event fires when we cut the selected text and the Copy event fires when we copy the selected text. There are two directives ngCopy and ngCut that can be used for the Copy and Cut events respectively, in AngularJS.
 
Step 1:
You first need to add an external Angular.js file to your application, for this you can go to the AngularJS official site or can download my source code and then fetch it or click on this link and download it: ANGULARJS. 
After downloading the external file you need to add this file to the Head section of your application.  
  1. <!doctype html>  
  2. <html ng-app>  
  3.   <head>  
  4.     <script src="angular.min.js"></script>  
  5.     <title>Cut and Copy Event</title>  
  6.   </head>  
Step 2:
Now I will show you how to use the ng-copy directive. 
Write the following code in the body section of your application:
  1. <input ng-copy="copied=true" ng-init="copied=false; value1='copy me'" ng-model="value1">  
  2. copied: {{copied}}
Here I have created a TextBox in which I have put the default value of the textbox ("copy me") using ng-model directives,
I have set the initial value "copied=false" using "ng-init". When a copy has not been done then initially the value will be false and I have set value the "copied=true" of "ng-copy" so when the selected text is to be copied then the value of what is copied will automatically be set to true.
 
Step 3:
Now I will show you how to use the ng-cut directive.
Write the following code in the body section of your application:
  1. <input ng-cut="cut=true" ng-init="cut=false; value2='cut me'" ng-model="value2">  
  2. cut: {{cut}}  
Here I have created another TextBox in which I have set the default value of the textbox ("cut me") using "ng-model" directives,
I have set the initial value "cut=false" using "ng-init". When a cut has not been done then initially the value will be false and I have set the value "cut=true" of "ng-cut" so when the selected text is to be cut then the value of what is cut will automatically be set to true.
 
Complete Code:
  1. <!doctype html>  
  2. <html ng-app>  
  3.   <head>  
  4.     <script src="angular.min.js"></script>  
  5.     <title>Cut and Copy Event</title>  
  6.   </head>  
  7.   <body>  
  8.     <input ng-copy="copied=true" ng-init="copied=false; value1='copy me'" ng-model="value1">  
  9.     copied: {{copied}}</br>  
  10.     <input ng-cut="cut=true" ng-init="cut=false; value2='cut me'" ng-model="value2">  
  11.     cut: {{cut}}  
  12.   </body>  
  13. </html>  
Output:
The default when for when an application is to start:
 
When the text of textbox-1 is copied.
 
When the text of textbox-2 is cut.
 
When both are cut and copied.
 


Similar Articles