简体   繁体   English

如何将特定div文本以角度js复制到剪贴板

[英]How to Copy Specific div text to clipboard in angular js

I just Create a Random Password Generator in Angular JS. 我只是在Angular JS中创建一个随机密码生成器。 This How the Result Come from Application 这个结果如何来自应用程序

<div data-ng-model="password" id="password">
   <input class="form-control" data-ng-model="password" id="password" placeholder="The new strong password will appear here" type="text">
</div>

Now I want to Copy The Generated password in clipboard through a button. 现在我想通过按钮复制剪贴板中的生成密码。 How can i do it? 我该怎么做?

You can use a module, ngClipboard or ngclip to do the same 您可以使用模块, ngClipboardngclip来执行相同操作

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

DEMO DEMO

  var myapp = angular.module('myapp', ["ngClipboard"]); myapp.config(['ngClipProvider', function(ngClipProvider) { ngClipProvider.setPath("//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf"); }]); myapp.controller('myctrl', function ($scope) { }); 
 <!doctype html> <html> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script> <script src="//rawgit.com/asafdav/ng-clip/master/src/ngClip.js"></script> </head> <body> <div ng-app="myapp"> <div class="container" ng-controller="myctrl"> <div class="page-header"> <h1> <small>ngClip</small></h1> <h2>CilpBoard copy example</h2> </div> <form> <div class="form-group"> <label >Copy #1</label> <textarea class="form-control" value="Hello" placeholder="Enter text to copy" ng-model="copy1">Hello</textarea> </div> <button class="btn btn-default" clip-copy="copy1">Copy!</button> <textarea class="form-control" rows="3" placeholder="paste here"></textarea> </form> </div> </div> <script> </script> </body > </html> 

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function($scope) { $scope.CheckClicked = function(){ debugger; if($scope.Duplicatepsw){ $scope.psw2 = $scope.psw1; } else{ $scope.psw2 = angular.copy($scope.psw2); } }; }); 
 <!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <div> Password <input type="text" ng-model="psw1" /> </div> <div> copiedpassword <input type="text" ng-model="psw2" /> </div> <div> Duplicate of textbox1 and replicate in textbox2 <input type="checkbox" ng-click="CheckClicked()" ng-model="Duplicatepsw" /> </div> </div> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM