"键未定义"在AngularJS的自定义过滤功能

时间:2016-04-01 03:58:25

标签: javascript angularjs

我正在浏览我所拥有的一本Angular JS书籍中的例子,并遇到了一些我不太清楚的事情。它与自定义过滤器和ng-repeat有关。这是代码

<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中创建一个类别列表。

代码运行正常。我不明白的是&#34; var keys = {};&#34;在自定义过滤器功能。

有变量&#34;键&#34;的意图是什么?并设置其属性&#39;值为true?

1 个答案:

答案 0 :(得分:0)

过滤器正在对$ scope.data和属性&#34; category&#34;提供的数据执行。它检查唯一类别,仅显示类别的第一个实例。

当循环执行时,它正在读取&#34;类别&#34;的值。关键的每个数据索引。

keys对象充当跟踪器,用于跟踪已添加到结果数组的值。

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

换句话说,它在产品#1上执行,将类别读作类别#1,将其添加到结果数组并创建一个键[&#34;类别#1&#34;]值为true。
接下来,产品#2,它提取&#34;类别#1和#34;的类别值。类别#1已经在关键对象上,因此它不会将产品#2添加到结果中 接下来,产品#3,它提取&#34;类别#2&#34;的类别值,看到它不在密钥对象中,因此它添加&#34;类别#2&#34;结果。

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

通过删除键[val] = true,它将导致所有产品出现。