Question

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

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

Answer 1

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

我使用lodash librairy来处理我的函数切换过滤器。

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

我希望这会对你有所帮助。

Answer 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>

希望这会对你有帮助......

请随时对此提出任何疑问!!!

Angluarjs使用按钮过滤数组

2 个答案: