AngularJS ng-cut, ng-copy, ng-paste Events with Example

Here we will learn what is ng-cut, ng-copy and ng-paste event directives in angularjs and how to use ngcut, ngcopy and ngpaste events in angularjs applications with example.

AngularJS ng-cut, ng-copy, ng-paste Events with Example

In angularjs ng-cut, ng-copy and ng-paste events are used to define custom behaviour functions during cut or copy or paste text in input text fields.

 

Suppose if you want to raise or call some custom functions while performing cut or copy or paste events on input text field in angularjs applications it’s better to use ng-cut, ng-copy and ng-paste events.

Syntax of AngularJS ng-cut, ng-copy, ng-paste Events

Following is the syntax of using angularjs cut, copy and paste event directives in applications

 

<element ng-cut="expression" ng-copy="expression" ng-paste="expression">

--Your Code--

</element>

The ng-cut, ng-copy and ng-paste events in angularjs will support for HTML input text fields.

Example of AngularJS ng-cut, ng-copy, ng-paste Events

In angularjs by using ng-cut, ng-copy and ng-paste events we can execute custom actions during copy or paste or cut text of input text field. Following is the example of using ng-cut, ng-copy and ng-paste events in angularjs application.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-cut, ng-copy and ng-paste Events with Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('ngcopyApp', []);

app.controller('ngcopyCtrl', function ($scope) {

$scope.cuttext = false;

$scope.copytext = false;

$scope.pasttext = false;

});

</script>

</head>

<body>

 

<div ng-app="ngcopyApp" ng-controller="ngcopyCtrl">

<h2>AngularJS ng-copy, paste, cut Events Example</h2>

Copy the Text: <input type="text" ng-copy="copytext=true" value="Hi, Welcome to Tutlane" /> <br />

<span>Text Copied:<b>{{copytext}}</b></span><br />

Cut the Text: <input type="text" ng-cut="cuttext=true" value="Hi, Welcome to Tutlane" /> <br />

<span>Text Cut:<b>{{cuttext}}</b></span><br />

Paste the Text: <input type="text" ng-paste="pasttext=true" /> <br />

<span>Text Pasted:<b>{{pasttext}}</b></span>

</div>

</body>

</html>

If you observe above angularjs example we are getting cut, copy and paste event values from textboxes and showing that result in application.

Output of AngularJS Cut, Copy, Paste Events Example

Following is the result of using ng-cut, ng-copy and ng-paste events in angularjs applications.

 

Angularjs ng-copy, ng-paste, ng-cut events example result or output

 

This is how we can use angularjs ng-cut, ng-copy and ng-paste event directives in applications to raise event or call functions during custom actions like copy or paste or cut text in input text controls.