"键未定义”;在AngularJS'的自定义筛选功能

"keys is not defined" in AngularJS's custom filter function

本文关键字：自定义 筛选 功能 quot 未定义 AngularJS      更新时间：2023-11-13

我在读一本Angular JS书中的例子时遇到了一些我不太清楚的地方。这与自定义过滤器和ng重复有关。这是的代码

<a ng-click="selectCategory()" class="btn btn-block btn-default btn-lg">
    Home
</a>
<a ng-repeat="item in data.products | orderBy: 'category' | unique: 'category'" ng-click="selectCategory(item)" class="btn btn-block btn-default btn-lg">
    {{item}}
</a>

以下代码是附加到html body标记的控制器。

angular.module("sportsStore").controller("sportsStoreCtrl", function ($scope) {
$scope.data = {
    products: [
        {
            name: "Product #1",
            description: "A product",
            category: "Category #1",
            price: 100
        },
        {
            name: "Product #2",
            description: "A product",
            category: "Category #1",
            price: 100
        },
        {
            name: "Product #3",
            description: "A product",
            category: "Category #2",
            price: 210
        },
        {
            name: "Product #4",
            description: "A product",
            category: "Category #3",
            price: 202
        }
    ]
};

})；

自定义过滤器的代码是

angular.module("customFilters", []).filter("unique", function () {
    return function (data, propertyName) {
        if (angular.isArray(data) && angular.isString(propertyName)) {
            var results = [];
            var keys = {};
            for (var i = 0; i < data.length; i++) {
                var val = data[i][propertyName];
                if (angular.isUndefined(keys[val])) {
                    keys[val] = true;
                    results.push(val);
                }
            }
            return results;
        } else {
            return data;
        }
    }
});

自定义过滤器应该做的基本上是在$scope.data.products.中创建一个类别列表

代码运行良好。我不明白的是"var-keys={}；"在自定义过滤器函数中所扮演的角色。

拥有变量"keys"并将其属性值设置为true的意图是什么？

过滤器正在$scope.data和属性"category"提供的数据上执行。它检查唯一的类别，只显示类别的第一个实例。

当循环执行时，它读取每个数据索引上的"category"键的值。

keys对象充当跟踪器来跟踪已添加到结果数组中的值。

通过在keys对象上设置一个值，如果再次遇到该值，它将不满足if条件，也不会将其添加到结果数组中。

换句话说，它在Product#1上执行，将类别读取为category#1，将其添加到结果数组中，并创建一个键["category#1"]值true
接下来，在产品#2中，它提取"类别#1"的类别值。类别#1已经在关键对象上，因此它不会将产品#2添加到结果中
接下来，在Product#3中，它提取"category#2"的类别值，发现它不在keys对象中，所以它将"category#2"添加到结果中。

如果我没有弄错的话，结果显示应该是产品#1、#3和#4信息。

通过移除[val]=true键，将导致所有产品出现。

相关文章：