angularjs ng重复svg跳过空值的索引

Posted 2023-03-28

【中文标题】angularjs ng重复svg跳过空值的索引

【英文标题】：angularjs ng repeat svg skipping index of null values

【发布时间】：2018-09-06 21:08:21

【问题描述】：

我正在根据以下数据类型构建图表：points = [insulin:20, cho:30];。 我使用 ng-repeat 循环遍历我的数组。 我使用索引作为 x 值，使用胰岛素或 cho 作为 y 值。 我希望索引作为 x 值，因为稍后我将使用日期作为 x 值，并希望显示 cho/insulin 值（如果它们发生在该日期）。 值绑定到索引，因为它们需要在 svg 中的那个时间范围内显示

<line class="insulinLine" ng-repeat="point in points | limitTo : 
points.length-1"
ng-x1="((width /points.length) * $index ) + (width/points.length)" 
ng-y1="((point.insulin / maxY) * 400)" 
ng-x2="((width / points.length) * ($index + 1)) + (width/points.length)" 
ng-y2="((points[$index + 1].insulin / maxY) * 400)"/>

我的问题出现在空值上，如果有空值，我希望 ng-repeat 跳过 y2 的索引直到下一个非空值，以便将线连接到下一个实际值。

我尝试过的选项是：

什么都不做，这会将 y 值设置到图的底部

ng-if，不显示空值将不会构建行

if="point.insulin!=null"

使用三元运算符会弄乱整个图表，这是合乎逻辑的，因为它只在每个点进行评估，而不是全局移动索引。

points[$index + 1].insulin !== null ? ((points[$index + 1].insulin / maxY) * 400) : ((points[$index + 2].insulin / maxY) * 400)

您可以将 x1,x2,y1,y2 值放在每个单独的点上，使用 javascript 中的函数来确定每一行的值，但应该有更简单的方法吗？

您能否设置一个条件来查找下一个非空值，然后使用该值并跳过该值的索引？

codepen 链接： https://codepen.io/mbezema/pen/bvWPVm

【参考方案1】：

我会在控制器中执行此逻辑。 有一个 setPoints 方法，每次你想更新点数组时，只需通过该方法。 类似的东西：

function ignoreNulls (array) 
    let lastValue = null;
    for (let i = array.length; i >= 0; i--) 
        if (!array[i]) 
            array[i] = lastValue;
        
        else 
            lastValue = array[i];
        
    

我在这里做的是在数组中倒退，检查是否有值。如果有 - 缓存它。如果没有放最后一个缓存的值。

【讨论】：

这不起作用，因为我的值绑定到日期或索引，因此将值更改为下一个非空值将创建一条沿着该非空值运行的水平线。因此，不是将线连接到具有非空值的下一个索引，而是会在所有具有非空值的索引处创建一条直线

重点是，在控制器而不是 ng-repeat 中执行。 ngRepeat 没有那个功能。

是的，您可以将 x1,x2,y1,y2 值放在每个单独的点上，使用 javascript 中的函数来确定每一行的值，但应该有更聪明的方法吗？我会尝试实现这个

你可以尝试调用一个方法来计算你的分数。但我强烈建议不要这样做，因为它会减慢您的应用程序。 ng-repeat 中的所有内容都发生在每个渲染上。所以尽量保持轻。在渲染之前进行一次计算要好得多。因为你在做图表，所以我认为效率是关键。

那么构建一个由 x1,x2,y1,y2 值组成的线阵列并为您的整个点阵列计算所有这些值会更好吗？然后根据您实际使用的范围过滤范围

【参考方案2】：

在 javascript 中计算点并构造一个新数组就可以了。然后我循环遍历insulinLines 和choLines 数组来设置最后一行。 codepen 链接：https://codepen.io/mbezema/pen/bvWPVm

function determineLines() 
        var insulinStack = [];
        var choStack = [];
        for (var i = 0; i < $scope.points.length; i++) 
            if($scope.points[i].insulin !== null)
                console.log(i);
                insulinStack.push(
                    xValue: i,
                    insulin: $scope.points[i].insulin
                );
            
            if($scope.points[i].cho !== null)
                choStack.push(
                    xValue: i,
                    cho: $scope.points[i].cho
                );
            
        
        $scope.insulinLines = [];
        $scope.choLines = [];
        while (insulinStack.length)
            $scope.insulinLines.push(insulinStack.pop());
        
        while (choStack.length)
            $scope.choLines.push(choStack.pop());