Question

我正在尝试将ng网格中的网格数据复制到剪贴板我一直在尝试使用ng剪辑，因为某些原因它似乎无法正常工作

HTML代码

<!doctype html>
<html>
<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <link data-require="ng-grid@2.0.14" data-semver="2.0.14" rel="stylesheet" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
  <link href="style.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
  <script src="//rawgit.com/asafdav/ng-clip/master/src/ngClip.js"></script>
  <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="ng-grid@2.0.14" data-semver="2.0.14" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js"></script>
  <script data-require="ng-grid@2.0.14" data-semver="2.0.14" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/plugins/ng-grid-flexible-height.js"></script>
  <script src="script.js"></script>
</head>
<body>

<div ng-app="myapp">
  <div class="container" ng-controller="myctrl">

    <div class="page-header">
      <h1>ngClip <small>example</small></h1>
    </div>

    <form>
      <div class="form-group">
        <label >Copy #1</label>
         <div class="gridStyle" ng-model="copy1" ng-grid="gridOptions"></div>
      </div>
      <button class="btn btn-default" clip-copy="copy1">Copy!</button>
      <br/><br/><br/>

      <textarea class="form-control" rows="3" placeholder="paste here"></textarea>
    </form>
  </div>
</div>

</body  >
</html>

的Javascript

var myapp = angular.module('myapp', ["ngGrid","ngClipboard"]);

  myapp.config(['ngClipProvider', function(ngClipProvider) {
    ngClipProvider.setPath("//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf");
  }]);

  myapp.controller('myctrl', function ($scope) {

     $scope.myData = [{name: "Moroni", age: 50},
      {name: "Tiancum", age: 43},
      {name: "Jacob", age: 27},
      {name: "Nephi", age: 29},
      {name: "Enos", age: 34}];
      $scope.gridOptions = { data: 'myData' };
      $scope.title = "ng-grid Example";

    $scope.fallback = function(copy) {
      window.prompt('Press cmd+c to copy the text below.', copy);
    };

    $scope.showMessage = function() {
      console.log("clip-click works!");
    };
  });

CSS

.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 200px
}

点击复制按钮我希望将网格数据复制到剪贴板我已经为同一个创建了一个plunker（http://plnkr.co/edit/SooWkk?p=preview）

Answer 1

如果您将HTML更改为以下内容，则应该可以使用。

 <div class="form-group">
    <label >Copy #1</label>
     <div class="gridStyle" ng-grid="gridOptions"></div>
  </div>
  <button class="btn btn-default" clip-copy="gridOptions.data">Copy!</button>

问题是您正在设置要复制到剪贴板的空白模型。您只需将clip-copy设置为您用于网格的模型即可。

使用带Ng网格的Ng Clip

1 个答案: