Using Ng Clip with Ng grid

Question

i am trying for copying the grid data in ng grid to clipboard i have been trying with ng clip for the same and for some reason it doesnt seem to work

HTML code

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

on click of the copy button i want the grid data to be copied to the clipboard i have created a plunker for the same(http://plnkr.co/edit/SooWkk?p=preview)

score 0 · Answer 1 · answered Jun 22 '15 at 13:09

0

If you change your HTML to the following it should work.

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

The problem is that you were setting a blank model which you were copying to your clipboard. You just need to set the clip-copy to the model you are using for the grid.

answered Jun 22 '15 at 13:09

Ben Sharpe

799
1
11
22

i tried this approach but with this i get the string associated with the data not the grid here is the updated plunker with ur suggestion http://plnkr.co/edit/xEbORi8HaP3qJWTbPqJ1?p=preview – user1767986 Jun 24 '15 at 03:09

Using Ng Clip with Ng grid

1 Answers1