我有一个关于 knockoutjs 中的 arrayFilter 的问题,我该如何用 2 个不同的下拉列表来过滤我的列表,这两个下拉列表应该是相关的,所以如果我选择了 1 种类型的建筑但没有区域,我应该显示所有该类型的建筑,但是,如果我在哪里选择建筑选项和区域选项,过滤应该考虑到这一点,我现在已经在原型(prototype)上工作了 2 天,但不知道如何在 arrayfilter 中返回正确的项目。
http://jsfiddle.net/vGg2h/138/
目前,我通过 View 模型制作了所有模型并粘贴在数据中,并且连接了一个过滤列表,但是我不明白如何通过 foreach 过滤器和 arrayFilter 返回正确的项目,这就是它得到的地方有点模糊。
self.filteredList = ko.computed(function () {
var filters = [];
filters.push(self.selectedBuilding());
filters.push(self.selectedArea());
var currentList = [];
ko.utils.arrayForEach(filters, function (filter) {
if (typeof filter !== "undefined") {
ko.utils.arrayFilter(self.products(), function (item) {
if (filter.id == item.areaId || filter.value == item.buildingId) {
currentList.push(item);
}
});
}
});
return currentList;
});
预先感谢您的回答!
最佳答案
您有两个问题:
- 您没有正确使用
ko.utils.arrayFilter
:您必须返回true
或false
,具体取决于是否应包含项目最终结果与否。因此,您不应该在arrayFilter
内构建结果
- 您总是从完整列表开始,而不是一个接一个地应用过滤器,而是在
arrayFilter
中错误地构建结果,这会导致您的过滤器与 OR 组合,而不是像您那样与 AND 组合本来想要的
您的固定代码如下所示:
self.filteredList = ko.computed(function () {
var filters = [];
filters.push(self.selectedBuilding());
filters.push(self.selectedArea());
var currentList = self.products();
ko.utils.arrayForEach(filters, function (filter) {
if (typeof filter !== "undefined") {
currentList = ko.utils.arrayFilter(currentList, function (item) {
if (filter.id == item.areaId || filter.value == item.buildingId) {
return true;
}
});
}
});
return currentList;
});
演示 JSFiddle
通过重用相同的列表,可以更好地看到AND过滤,您可以重写代码以在两个单独的步骤中进行过滤:
self.filteredList = ko.computed(function () {
var currentList = self.products();
if (self.selectedBuilding())
{
currentList = ko.utils.arrayFilter(currentList, function(item) {
return self.selectedBuilding().value == item.buildingId;
});
}
if (self.selectedArea())
{
currentList = ko.utils.arrayFilter(currentList, function(item) {
return self.selectedArea().id == item.areaId;
});
}
return currentList;
});
在这段代码中,更清楚的是,您从完整列表开始,然后逐一应用不同的过滤器,进一步过滤原始列表。
演示 JSFiddle
注意:如果您最初想从一个空列表开始(就像在原始代码中一样),那么如果所有过滤器都是空的,您可以只返回一个空数组:
self.filteredList = ko.computed(function () {
if (!self.selectedBuilding() && !self.selectedArea())
return [];
//...
};
演示 JSFiddle .
关于javascript - Knockoutjs array过滤多个下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33845599/