Kopiere Tabellenzeile mit clipboard.js

Ich habe eine Bootstrap-Tabelle, in der ich die Ergebnisse einer Datenbanksuche dynamisch anzeigen, mit Angulars Anweisung ng-repeat. Diese Ergebnisse enthalten ein E-Mail-Feld. Ich versuche, eine Schaltfläche rechts von jeder E-Mail-Zelle anzuzeigen, die die E-Mail dieser Zelle in die Zwischenablage kopieren würde.Kopiere Tabellenzeile mit clipboard.js

Aber diese Tabelle hat kein eindeutiges Id-Feld, und ich weiß nicht, wie man dem E-Mail-Feld jeder Zeile eine andere ID gibt, so dass das "Daten-Zwischenablage-Ziel" von clipboard.js weiß, dass es das kopieren muss E-Mail der gleichen Zeile. Momentan kopiert jede Schaltfläche unabhängig von ihrer eigenen Zeile die E-Mail der ersten Zeile, wahrscheinlich weil sie das erste Erscheinen des Tags "#emailField" nachschaut.

Irgendwelche Ideen?

Hier ist meine HTML-Datei:

<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script> 
</head> 
<body ng-app="myApp"> 
    <div class="container" ng-controller="AppCtrl"> 
     <br> 
     <input type="text" class="form-control" ng-model="query" placeholder="Chercher ici"> 
     <br> 
     <br> 
     <h4>Results:</h4> 
     <table class="table table-striped table-responsive table-condensed table-bordered"> 
      <thead> 
       <tr> 
        <th>Client</th> 
        <th>Contact</th> 
        <th>Email</th> 
        <th>Telephone</th> 
        <th>Mobile</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="x in queryResult"> 
        <td>{{ x.client }}</td> 
        <td>{{ x.contact }}</td> 
        <td> 
         <b id="emailField">{{ x.email }}</b> 
         <button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField"> 
          <span class="glyphicon glyphicon-copy"></span> 
         </button> 
        </td> 
        <td>{{ x.telephone }}</td> 
        <td>{{ x.mobile }}</td> 
       </tr> 
      </tbody> 
     </table> 
     <h4>Query status:</h4> 
     <pre class="ng-binding" ng-bind="queryStatus"></pre> 
    </div> 

    <!-- Scripts--> 
    <script src="./bower_components/clipboard/dist/clipboard.min.js"></script> 
    <script> 
     new Clipboard('.btn'); 
    </script> 
    <script src="./bower_components/angular/angular.js"></script> 
    <script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 
    <script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
    <script src="./controller.js"></script> 
</body>

Quelle

2016-06-02 Martin Locqueville

Versuchen Sie diesen Abschnitt Markup zu ändern:

<td> 
    <b id="emailField">{{ x.email }}</b> 
    <button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField"> 
     <span class="glyphicon glyphicon-copy"></span> 
    </button> 
</td>

dazu:

<td> 
    <b id="emailField_{{$index}}">{{ x.email }}</b> 
    <button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField_{{$index}}"> 
     <span class="glyphicon glyphicon-copy"></span> 
    </button> 
</td>

Sie können dieverwenden, das in ng-repeat verfügbar ist, um eine eindeutige ID für jedes E-Mail-Element zu erstellen.

Quelle

2016-06-02 14:26:33 Lex

Alles funktioniert, danke! –

Kopiere Tabellenzeile mit clipboard.js

Antwort

Verwandte Themen