需求:实现点击复制按钮,复制对应文本。
方法:可以通过npm下载"clipboard"包 (也可以引入外部文件)
package.json
"dependencies": { "clipboard": "^1.6.1" }
js:
var Clipboard = require('clipboard');
html:
<div class="clearfix"> <table class="table table-bordered table-striped table-center" style="margin-top: 20px;"> <thead> <tr> <th>渠道</th> <th>批次</th> <th>对应投放链接</th> <th>操作</th> </tr> </thead> <tbody> <!-- {{selected}} --> <tr ng-repeat="(index,item) in items" ng-if="items.length > 0"> <td ng-bind="item.channel_name"></td> <td ng-bind='item.batch_name'></td> <td ng-bind="item.url"></td> <td> <button class="btn btn-info btn-xs btn_index_{{index}}" ng-click="copy(index)" data-clipboard-text="{{item.url}}">复制</button> </td> </tr> <tr ng-if="items.length == 0"> <td colspan="100%">暂无记录</td> </tr> </tbody> </table> </div>
btn_index_{{index}}传进index,为了区别循环出来的按钮
$scope.copy = function (index) { var a = new Clipboard('.btn_index_'+index); alert("复制成功"); }
参考文章:1、http://blog.csdn.net/hry2015/article/details/70941912
2、https://clipboardjs.com/
此功能也试用于vue中