AngularJS 和 Handsontable：如何考虑数据列元素之间的数据绑定答案

【问题标题】：AngularJS and Handsontable: How to think about data binding between datacolumn elementsAngularJS 和 Handsontable：如何考虑数据列元素之间的数据绑定
【发布时间】：2014-03-12 13:54:48
【问题描述】：

我正在尝试使用 AngularJS 重写 JS/jQuery SPA。 SPA 是一个使用惊人的Handsontable 的项目编辑网格。我很高兴看到有一个 AngularJS version 在工作中，并且在大多数情况下，它的工作方式与预期一样。

但是，我很难弄清楚如何在 AngularJS 中使用 jQuery 做一些事情。网格（除其他外）有 3 列，其中一列依赖于另外两列。三列是成本、售价和利润（即 (1 - (成本/价格)) * 100 ）。我可以在控制器中进行数学运算并将边距传递给 $scope.items 变量以进行初始加载，但是当您更改成本或价格列时，它显然不会更新。这似乎是进行双向数据绑定的理想场所，但我不知道如何将边距的数据列值绑定到另外两行的值。我觉得有一种明显的方法可以做到这一点，但由于我是 AngularJS 的新手，我想我可能会把它扔给社区。p>

提前致谢！

编辑：

因此，在尝试了一些答案之后，我想稍微改进一下我的问题，以触及问题的核心。我有一个 REST API 提供一个 JSON 文档，其中包含来自在线销售点服务的项目数组。这是一个带有虚拟数据的示例：

{ '@attributes': {'count':10}, 'Item': [
  { 'customSku':'sampleItem1'
  , 'description':'Sample Item, first'
  , 'defaultCost':'10.00'
  , 'Prices': {'ItemPrice':[
      {'amount':'17.99', 'useType':'Default'}
    , {'amount':'19.99', 'useType':'MSRP'}
    ]}
  }
, { 'customSku':'sampleItem2'
  , 'description':'Item, Sample, 2nd'
  , 'defaultCost':'20.00'
  , 'Prices': {'ItemPrice':[
      {'amount':'29.99', 'useType':'Default'}
    , {'amount':'39.99', 'useType':'MSRP'}
    ]}
  }
]}

我不是在开玩笑，数据的结构是这样的，完全是这样。无论如何。

现在，我将它传递给我的控制器中的视图，如下所示：$scope.items = JSON.parse(request.responseText);。如何将函数：$scope.getMargin = function() { return (1 - (cost / price)) * 100 } 传递给视图，以便将成本和价格限定为正确的项目？我觉得我真的很接近获得它，但我还没有完全到达那里。感谢到目前为止的回答者！

编辑 2：

Plunker here，根据要求！

【问题讨论】：

数据看起来不错，不用担心！
我已添加到我的答案中
你有想过这个吗？

标签： jquery angularjs handsontable

【解决方案1】：

您可以将第三列数据绑定到一个表达式，该表达式是一个计算值的函数

$scope.getValue=function() {
   return 1 - (cost / price)) * 100;
}

在绑定中就可以了

<div>{{getValue()}}</div>

【讨论】：

我不确定这是否适用于我的特定应用程序，因为据我所知，handsontable 无法使用 {{}} 语法来填充表值。
我对此也有点错误！您不能使用 {{}} 语法，但在 datacolumn 值中引用函数是可行的。我仍然不能完全弄清楚如何定义函数，或者在哪里。让我编辑我的问题以包含更多细节。

【解决方案2】：

您将需要为您的 $scope 变量之一添加手表：请参阅

How do I use $scope.$watch and $scope.$apply in AngularJS?

如果您使用角度 ngRepeat 呈现行，则每个项目都将具有正确的索引范围，因为为行中的每个范围内的项目创建观察者 + 1 用于整个 ngRepeat

http://docs.angularjs.org/api/ng.directive:ngRepeat

【讨论】：

我认为答案就在某个地方，但并不是这么简单。据我所知，更改handsontable 中的数据不会导致$scope 发生更改。我可能不得不在源头上四处挖掘以验证。
我的立场是正确的。我刚刚做了一个快速而肮脏的测试，td 的值绑定到 $scope 模型。现在，如果我能弄清楚如何使边距列动态...
@scott_trinh 你能打个屁吗？
我会把一个放在一起。不幸的是，我没有使用 ng-repeat 来构建它，因为这真的很容易。 :) 我正在使用问题中链接的 AngularJS 版本的 Handsontable，它在后台发生了类似的事情，但不使用 {{}} 语法。我会在 Plunker 上工作并尽快启动它。感谢您的宝贵时间！

【解决方案3】：

我真的是 Handsontable 的新手，但我的想法是您可以使用 自定义渲染器，然后在渲染器中计算边距。

不确定我的方法是否适用于您正在使用或在 2014 年使用的 handsontable，但对于 Handsontable 0.26.x 和 ngHandsontable 0.12.0 它应该可以工作。我刚刚有一个非常相似的问题，我刚刚找到了一个解决方案（请参阅handsontable: how to use an entire datarow (object) as data for a hot-column?），因此我认为它也适用于您。

使用自定义渲染器（和编辑器，但我猜边距列无论如何都是只读的）

<datacolumn read-only renderer="marginRenderer" width="80" title="'Margin'"></datacolumn>

然后从表数据源获取数据并在渲染器中进行计算。

  $scope.marginRenderer = function (instance, td, row, col, prop, value, cellProperties) {
      var translatedRow = instance.getPlugin('columnSorting').translateRow(row);
      var rowData = instance.getSourceData()[translatedRow];
      td.innerHTML = '' + ((1 - (rowData.cost / rowData.price)) * 100);
      return td;
  }

【讨论】：