gpt4 book ai didi

javascript - 使用 clipboard.js 复制表格行

转载 作者:行者123 更新时间:2023-11-29 10:35:19 26 4
gpt4 key购买 nike

我有一个引导表,我使用 Angular 的指令 ng-repeat 在其中动态显示数据库搜索的结果。这些结果包括一个电子邮件字段。我正在尝试在每个电子邮件单元格的右侧显示一个按钮,用于将该单元格的电子邮件复制到剪贴板。

但该表没有唯一的 Id 字段,我不知道如何为每一行的电子邮件字段分配不同的 id,以便 clipboard.js 的“data-clipboard-target”知道它必须复制电子邮件同一行。现在,每个按钮都复制第一行的电子邮件,独立于它自己的行,可能是因为它会查找“#emailField”标签的第一次出现。

有什么想法吗?

这是我的 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>

最佳答案

尝试更改这部分标记:

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

您可以使用 ng-repeat 中可用的 $index 为每个电子邮件元素创建一个唯一的 id。

关于javascript - 使用 clipboard.js 复制表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37594143/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com