4

理念

我们正在 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 分解该字符串时出现任何错误，则很容易发生这种情况。

这是一个我们已经在尝试的工作plunker。

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

出于某种原因，从 excel 电子表格中复制列时，值之间没有分隔符。当我们从单行的多列而不是单列的多行复制时，我可以在 '\n' 字符上使用 .split() 并且它工作正常。但是，最好允许用户从单行和单列复制两者。问题只是当您从 excel 复制列时没有分隔符。

0.89663.91783.91773.91773.9178

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

解决方案

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

4

2 回答 2

2

这应该可以解决问题：

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

于 2017-10-17T12:55:45.060 回答
1

我可以看到一个带有额外输入的看似合理的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
  });
于 2017-10-17T12:57:04.973 回答