AngularJS-如何处理转换后的数据

Question

情况

我收集了以下格式的数据：

[{
  xRatio: 0.2,
  yRatio: 0.1,
  value: 15
 }, {
  xRatio: 0.6,
  yRatio: -0.3,
  value: 8
}]

我想在ng-repeat中显示这些数据。但在我显示这些数据之前，我必须以

的形式将关系数据转换为绝对数据

[{
  x: 120,
  y: 110,
  value: 15
 }, {
  x: 160,
  y: 70,
  value: 8
}]

为了做到这一点，我在ng-repeat中使用了一个函数，但是这个转换函数每次调用都会返回一个新的集合，因此模型永远不会稳定，角度抛出infinite loop exception并放弃。

html代码是，

<div ng-repeat="result in results">    
  <div>
    <heat-map data="convertResult(result)"></heat-map>
  </div>   
</div>

热图指令会插入并显示数据。

我的问题是：如何处理这种情况，而不会使用生成的值混淆我的初始集合？

因此结果集合的单个元素没有改变我想到了转换器函数上的one-time-binding，但这不起作用。

编辑：

我还希望能够从已转换的集合以及原始集合中删除项目。

Answer 1

1. 使用::中的ng-repeat运算符来阻止重新评估表达式：

   <div ng-repeat = "item in ::convert(items)" >
   

2. 否则，您可以在将数据提供给ng-repeat之前手动转换数据：

   JS

   $scope.cleanData = convert( $scope.ratioData );
   

   HTML

   <div ng-repeat = "item in cleanData" >
   

3. 或者在需要时进行转换。在指令热图中，使用符号data将&定义为表达式绑定，并在指令控制器中使用

    scope.data()
   

Answer 2

您可以在ng-repeat中使用转换后的数据版本吗？ 像这样（在您的控制器中）：

var convertedData = data.map(function datum) {
    return convert(datum); 
});
function convert(datum) {
  // ... your conversion logic here ...
}

然后在convertedData中使用ng-repeat？