我正在浏览我所拥有的一本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?
答案 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,它将导致所有产品出现。