Copier la ligne du tableau à l'aide de clipboard.js

J'ai une table d'amorçage dans laquelle j'affiche dynamiquement les résultats d'une recherche dans une base de données, en utilisant la directive ng-repeat d'Angular. Ces résultats incluent un champ de courrier électronique. J'essaye d'afficher un bouton à la droite de chaque cellule d'email qui copierait l'email de cette cellule dans le presse-papiers.Copier la ligne du tableau à l'aide de clipboard.js

Mais cette table n'a pas de champ Id unique, et je ne sais pas comment affecter un identifiant différent au champ email de chaque ligne, de sorte que clipboard.js "data-presse-cible" sait qu'il doit copier le email de la même ligne. À l'heure actuelle, chaque bouton copie l'e-mail de la première ligne, indépendamment de sa propre ligne, probablement parce qu'il recherche la première apparition de la balise "#emailField".

Des idées?

Voici mon fichier html:

<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>

Source

2016-06-02 Martin Locqueville

Essayez de changer cette section de balisage:

<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>

à ceci:

<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>

Vous pouvez utiliser le $index est disponible dans ng-repeat pour créer un identifiant unique pour chaque élément de courrier électronique.

Source

2016-06-02 14:26:33 Lex

Tout fonctionne, merci! –

Copier la ligne du tableau à l'aide de clipboard.js

Répondre

Questions connexes