die Zwischenablage kopieren Schaltfläche HTML Angular

Question

Unter der Annahme, dass wir die folgenden

<div class="echo" id="hidden_div" style="display:none"> 
    <pre> 
     I want to copy this 
     I want to copy this 
     I want to copy this 
    </pre> 
</div> 

Und unter der Annahme haben, dass wir die folgenden Knopf haben:

<button type="button" class="btn" onclick="showHide()">Submit</button> 

<script> 
function showHide() { 
    document.getElementById("hidden_div").style.display = "block"; 
} 
</script> 

Wie kann ich eine andere Taste erstellen, um die Werte in der kopieren <pre> in die Zwischenablage?

Und wie kann ich die Bezeichnung des "Senden" -Buttons auf "Schließen" ändern und das Div wieder ausblenden, bis Sie erneut auf "Senden" klicken?

Answer 1

Sie können ngclipboard verwenden. Es ist eine einfache Möglichkeit, die Kopie in die Zwischenablage zu implementieren.

Fügen Sie es in Ihr Dokument ein.

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script> 

ngclipboard Abhängigkeit zu Ihrem Modul

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

Dann einfach Add. Hier ein Beispiel:

<!-- Target --> 
<input id="foo" value="https://github.com/sachinchoolur/ngclipboard.git"> 

<!-- Trigger --> 
<button class="btn" ngclipboard data-clipboard-target="#foo"> 
    <img src="assets/clippy.svg" alt="Copy to clipboard"> 
</button> 

In Ihrem Fall zum Beispiel:

<div class="echo" id="hidden_div" style="display:none"> 
    <pre id="toCopy"> 
     I want to copy this 
     I want to copy this 
     I want to copy this 
    </pre> 
</div> 
<button class="btn" ngclipboard data-clipboard-target="#toCopy" ng-click="submit()"> 
    {{buttonText}} 
</button> 

In Ihrem Controller-Code:

$scope.buttonText = "Submit"; 
$scope.submit = function(){ 
    if($scope.buttonText === "Submit"){ 
     document.getElementById("hidden_div").style.display = "block"; 
     $scope.buttonText = "Cancel"; 
    } 
    else if($scope.buttonText === "Cancel"){ 
     document.getElementById("hidden_div").style.display = "none"; 
     $scope.buttonText = "Submit"; 
    } 
} 

habe nicht getestet. Aber das sollte funktionieren. Bitte lassen Sie es mich in beiden Fällen wissen.