AngularJS:如何显示来自许多复选框的许多结果

分享于2023年05月08日 angular-ngmodel angularjs checkbox filter 问答
【问题标题】:AngularJS: how to display many results from many checkboxesAngularJS:如何显示来自许多复选框的许多结果
【发布时间】:2023-05-07 05:27:01
【问题描述】:

我正在使用 AngularJS 来过滤酒单的结果。葡萄酒按颜色(红色、白色、玫瑰色、香槟色)和其他参数进行分类。

当使用复选框选中一种颜色(例如红色)时,会出现经过过滤的红酒列表。但选择两种颜色时,不会出现任何结果(例如,红色和白色)。

我的愿望:

  • 即使选中了红色、白色和香槟色,也会显示(红色、白色和香槟酒或其他参数)的列表。我的主要愿望是能够选择多个参数,并显示所有选中的参数。能够检查颜色,国家..

这里是代码示例:

red white rose champagne

{{wine.name}} - {{wine.characteristics}}


Filtered list has {{filtered.length}} items

代码演示: http://jsfiddle.net/stefanos/kTYdd/26/

问候,

史蒂芬


【解决方案1】:

尝试像这样更新您的过滤器:

.filter('filteredstoves', function() {
  return function(stoves, characteristics) {
    var result = []; 
    angular.forEach(characteristics, function(value, key) {
      if(value) {
        for(var index = 0; index < stoves.length; index++) {
          var wine = stoves[index];
          if(wine.characteristics.indexOf(key) >= 0) {
            if (result.indexOf(wine) === -1){
                result.push(wine);
            }
          }
        }
      }
    });
    return result;
  }
});

DEMO

【讨论】:

  • 感谢您的快速回复!我刚试过,效果很好!!我尝试了几个小时,我没有成功......非常感谢Khanh TO!
  • 感谢您的帮助.....可以过滤结果。我添加了更多,如果它检查了“红色”和“leger”,则出现所有带有红色和leger的条目,它没有被过滤。如果我检查香槟和莱格,同样的事情。 jsfiddle.net/stefanos/RUFdy/4
  • @Stéphane:有什么问题?没看懂
  • 我的英语不太好。我的愿望是,例如:如果红色复选框和 leger 都被选中,将显示一个列表,其中仅包含带有 leger 参数的条目 red wines,而不是包含 too leger 或 red 的其他条目。听起来很难建立一个代码来过滤所有这些参数。问候
  • @Stéphane:对不起,但我还是不明白你的意思。您能否将其作为一个单独的问题提出,以便您也能引起其他人的更多关注?在那个问题中,你可以给出例子,上下文,......以使其更清楚。这就是你应该在 SO meta.stackoverflow.com/questions/254814/… 上做的事情