Question

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

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

提前致谢！

编辑：

所以在玩了一些答案之后，我想稍微改进一下我的问题，以了解问题的核心。我有一个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！

Answer 1

您需要为其中一个$ scope vars添加监视：请参阅

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

如果使用角度ngRepeat渲染行，则每个项目都将具有正确的索引范围，因为为整个ngRepeat <+ p>行中的每个范围项目创建了观察者

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

Answer 2

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

的函数

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

并且在绑定中只做

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

Answer 3

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

不确定我的方法是否适用于您在2014年使用或使用的指南，但对于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;
  }

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

编辑：

编辑2：

3 个答案: