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

Question

理念

我们正在 Angular 1.5.x 中构建一个应用程序，我们正在尝试实现一项功能，允许用户从 Excel 工作表或任何其他电子表格中粘贴单列单元格(单列，任意数量的行深)到输入中。

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

这个想法是，当他们将从电子表格的单个列复制的数据粘贴到其中一个输入时，数据将逐个单元格地解析，并按降序分配给每个输入。 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 电子表格复制列时，值之间没有分隔符。当我们从单行的多列而不是单列的多行复制时，我能够在 '\n' 字符上使用 .split() 并且它工作正常。但是，最好允许用户从单行和单列向下复制。问题只是当您从 Excel 复制列时没有 delims。

0.89663.91783.91773.91773.9178

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

解决方案

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

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