Angularjs使用按钮过滤数组答案

【问题标题】：Angluarjs using buttons to filter an arrayAngularjs使用按钮过滤数组
【发布时间】：2016-01-11 12:12:14
【问题描述】：

我正在尝试让应用程序使用按钮来查看数组中食谱的属性并根据限制隐藏某些食谱。我知道对于有经验的编码人员来说这可能是一个简单的问题，但我仍在学习。我知道我的代码混乱且不完整，我只是用它来整理我的想法。很多占位符。道歉。

PS 如果您看过我之前的问题，我被指示放弃那组过滤器并简化应用程序以改用 ng-show/hide。

编辑：

html:

<div>
  <h2>Restrictions</h2>
  <button ng-click="toggleNuts">Nuts</button>
  <button ng-click="toggleWheat">Wheat</button>

</div>

ng-重复：

<div>
  <h2>Restrictions</h2>
  <button ng-click="toggleNuts">Nuts</button>
  <button ng-click="toggleWheat">Wheat</button>

</div>

recipe.js：

var foods = [{
      type: 'vegetarian',
      name: 'recipe's name',
      restrictions: [
       'nuts',
       'dairy',
       ],
}]

plunker：

http://plnkr.co/edit/lCNSBlUt8X3wDT8Tsbkd?p=preview

【问题讨论】：

plunker：plnkr.co/edit/lCNSBlUt8X3wDT8Tsbkd
旁注：我尝试了许多不同的教程解决方案，但都没有成功。我拿出我以前的尝试并将占位符放在他们的位置。
什么确切地不起作用？您并没有在这个问题中真正描述您的问题；而是您描述程序的要求。此外，您没有在问题中列出任何要进行故障排除的代码，而是在 cmets 中列出了指向整个代码源的链接，任何人都不太可能花时间详细研究。我强烈建议阅读如何创建minimal reproducible example 并编辑您的问题。
@AndriesGous，您是否只想在单击按钮时进行搜索？
@Abhilash 确实我需要它在单击按钮时隐藏食谱

标签： angularjs button ng-show

【解决方案1】：

我编辑了你的 plunker：http://plnkr.co/edit/rCNaOx9JMgkwVgG9Tn3M?p=preview

我使用 lodash 库来处理我的功能切换中的过滤器。

$scope.toggle = function(restriction) {  
    $scope.products = _.filter(foods, function( food ) {
      return _.includes(food.restrictions, restriction);
    });
}

希望对你有所帮助。

【讨论】：

这确实让我更接近是的，非常感谢！但是，这与我需要的相反。我需要它来隐藏具有与按钮相对应的限制的食谱。另外，我需要它们能够堆叠和切换。本质上（我现在意识到我应该更清楚，道歉）我需要它们像复选框一样工作。这可能吗？
@Claies 这有意义吗？
我设法让它隐藏而不是显示，但切换或堆叠仍然没有运气

【解决方案2】：

我已经完成了您的要求，您可以在此处查看结果。 Plunker

为此，我创建了一个新过滤器restrict。

.filter('restrict', function() {
      return function(foods, filterNuts, filterWheats) {
        var filtered = [];
       debugger;
        angular.forEach(foods, function(food) {
          if(filterNuts){
              if (angular.lowercase(food.restrictions).indexOf( "nuts" ) != -1) {
              filtered.push(food);
            }
          }
          if(filterWheats){
              if (angular.lowercase(food.restrictions).indexOf( "wheat" ) != -1) {
              filtered.push(food);
            }
          }

        });
        return filtered;
      };
    }
);

我已经将此过滤器应用到我们的 html 中的ng-repeat，

<div class="results" ng-repeat="food in products| restrict:filterNuts:filterWheat"> </div>

希望对你有所帮助...

如有任何疑问，请随时提出！！！

【讨论】：