AngularJS自定义过滤器，对过滤器函数进行无限循环

AngularJS custom filter doing infinite loop of filter funtion

本文关键字：过滤器 函数 无限循环 自定义 AngularJS      更新时间：2023-09-26

我有一个正在用数据填充的表。所以，我想写一个自定义过滤器，它将过滤位于某个范围内的数据(基本上是一个范围过滤器)。听起来很简单，但是当我实现它时，过滤器被无限地执行。

数据:

[{
    "id": 6,
    "columns": [
        {
            "header": "achievedPrice",
            "type": "number",
            "achievedPrice": 33190
        },
        {
            "header": "askingPrice",
            "type": "number",
            "askingPrice": 133
        }
    ]
},
{
    "id": 82,
    "columns": [
        {
            "header": "achievedPrice",
            "type": "number",
            "achievedPrice": 16784
        },
        {
            "header": "askingPrice",
            "type": "number",
            "askingPrice": 13556
        }
    ]
}]
表:

<tbody>
    <tr ng-repeat="row in readyData.rows | filter:numRange">
        <td ng-repeat="column in row.columns">
            {{ column[column.header] }}
        </td>
    </tr>
</tbody>
<<p> 过滤器/strong> 
scope.numRange = function (list) {
                var min = 0; // DUMMY VALUE
                var max = 134; // DUMMY VALUE
                if (list.columns.length) {
                    for (var i = 0; i < list.columns.length; i += 1) {
                        if (list.columns[i].askingPrice) {
                            if (list.columns[i].askingPrice >= min && list.columns[i].askingPrice <= max) {
                                return true;
                            }
                        }
                    }
                }
                return false;
            };

它在表中显示正确的数据，但是它没完没了地执行。我试过在一个新的页面做同样的事情，它在那里工作得很好。如果我使用Angular的过滤器(只用于文本过滤)，这个过滤器可以正常工作。

我发现问题了。这个范围过滤器没有什么问题，包含表数据的对象也包含一些其他数据，因此其他数据正在被某些组件使用，该组件也使用过滤器，因此它们继续过滤主对象。

为了解决这个问题，我在这些组件指令的范围内使用了"@"来使它们只读而不会混乱。
相关文章：