Ng-Paste

Question

想法

我们正在 Angular 1.5.x 中构建一个应用程序，我们正在尝试实现一项功能，允许用户从 [=44] 中粘贴单列单元格=] sheet 或任何其他传播sheet（单列，任意行数深）到输入中。

我们有一个数据 table，其中包含如下所示的内联输入：

他们的想法是，当他们将从传播的单列复制的数据粘贴到其中一个输入时，数据将逐个单元格地解析，并按降序分配给每个输入。 IE。如果我将一列包含 [4.52, 6.235, 9.2301] 的单元格粘贴到包含 15.23 的顶部输入中，则 15.23 将变为 4.52，3.1234 将变为 6.235，而 3.1322 将变为 9.2301。我们知道如何将变量分配给输入，但我们需要数组格式的剪贴板数据，而不是一个大字符串。

问题

我们研究过使用 ng-paste 指令和 $event.clipboardData 属性来实现这一点，但我们只能访问字符串形式的数据，虽然我们有一种解析字符串的方法，如果我们可以访问作为数组或列表进入的元素以防止我们最终使用 delims 分解该字符串时出现任何错误，那么出错的可能性就会大大降低。

Here 是我们已经在尝试的工作 plunker。

这是要复制并粘贴到输入中的示例数据集：

出于某种原因，从 excel 传播sheet 复制列时，值之间没有分隔符。当我们从单行的多列而不是单列的多行复制时，我能够在 '\n' 字符上使用 .split() 并且它工作正常。但是，最好允许用户从单行和单列向下复制。问题只是当您从 excel.

复制列时没有 delims

0.89663.91783.91773.91773.9178

这是从 excel/google sheet^ 粘贴的内容，但您可以随意将这些值放在 spreadsheet 的单个列中并从那里复制。我们可以确定粘贴的数据将来自 spreadsheet.

解决方案

关于如何将剪贴板数据作为数组获取的任何想法？

Answer 1

这应该可以解决问题：

HTML:

<input ng-paste="pasteFunction($event)"><br />
<p>Input as array:</p>
<p ng-repeat="item in pasted track by $index">{{item}}</p>

JavaScript:

  $scope.pasteFunction = function(ev) {
    $scope.pasted = ev.clipboardData.getData('text').split(" ").map(Number);
    console.log($scope.pasted);
  }

工作代码：Plunker

Answer 2

我可以看到一个合理的 hack 额外的输入 ，而不是使用现有的。然后正文变成：

<body ng-controller="MainCtrl">
  <input ng-paste="pasteFunction($event)">
  <input ng-repeat="t in test" ng-model="t"/>
</body>

并且控制器更改为：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.obj = {};
  $scope.test = [111, 222, 333];
  $scope.pasteFunction = function(ev) {
    $scope.test = ev.clipboardData.getData('text').split(" ").map(Number);
  }
  // paste this: 999 888 777
  });

Ng-Paste - 以数组或列表的形式访问粘贴的数据

Ng-Paste - Accessing Pasted Data as an Array or List

javascript

onpaste

clipboarddata

angularjs

想法

问题

解决方案