Javascript AngularJS通过具有布尔值的多个键进行过滤_Javascript_Angularjs

Javascript AngularJS通过具有布尔值的多个键进行过滤

javascript angularjs

Javascript AngularJS通过具有布尔值的多个键进行过滤,javascript,angularjs,Javascript,Angularjs,我试图为食物菜单设置一个带有两个过滤器的过滤系统“纯素”和/或“无麸质”。每个菜单项对象都有“is_vegan”和“is_麸质免费”这两个选项，它们是真是假我试过使用ng模型和angular的过滤函数的复选框当前系统的问题是，即使我想搜索不含麸质的东西，它也会显示一个“is_vegan:true”的项目 HTML: 要按多个属性进行筛选，在您的情况下，您应该添加以下内容：filter:{is_-麸质_-free:search.is_-麸质_-free，is_-vegan:search.is

我试图为食物菜单设置一个带有两个过滤器的过滤系统“纯素”和/或“无麸质”。每个菜单项对象都有“is_vegan”和“is_麸质免费”这两个选项，它们是真是假

我试过使用ng模型和angular的过滤函数的复选框

当前系统的问题是，即使我想搜索不含麸质的东西，它也会显示一个“is_vegan:true”的项目

HTML:

要按多个属性进行筛选，在您的情况下，您应该添加以下内容：

filter:{is_-麸质_-free:search.is_-麸质_-free，is_-vegan:search.is_-vegan}

另外，当您需要使用嵌套的

ng repeat

时，最好使用指令

下面是一个代码片段：

var-app=angular.module（'app'，[]）；
应用程序控制器（'mainCtrl'，函数（$scope）{
$scope.menus=[
{  
“布朗尼”：[
{  
“名称”：“Baker's Choice酒吧组合”，
“价格”：45，
“描述”：“一个美丽而美味的木兰面包店的双软糖布朗尼，巧克力块金黄和神奇饼干棒组合。”，
“图像url”：https://pantograph0.goldbely.com/s364/uploads/product_image/image/8346/bakers-choice-bars-assortment.1ddd25a1f59a89a1de2d0583dab50000.jpg",
“是素食主义者”：错，
“不含麸质”是真的吗
}
]
},
{  
“蛋糕”：[
{  
“名称”：“树莓柠檬蛋糕”，
“价格”：50，
“描述”：“香草奶油蛋糕，分层覆盆子瑞士酥皮奶油和柠檬凝乳馅，覆盖覆盆子奶油。”，
“图像url”：http://www.empirecake.com/_main_site/wp-content/uploads/2014/12/Rasberry_Lemon_01_final_drkr-600.jpg",
“是素食主义者”：错，
“不含麸质”：错
}
]
},
{  
“甜点”：[
{  
“名称”：“鲜奶油”，
“价格”：25.5，
“描述”：“鲜奶油是用搅拌器或搅拌器搅打至松软的奶油。鲜奶油通常加糖，有时加香草调味，通常被称为Chantilly奶油或crème Chantilly。”，
“图像url”：http://cf.houseofyumm.com/wp-content/uploads/2014/11/Peppermint-Whipped-Cream2.jpg",
“是素食主义者”：没错，
“不含麸质”是真的吗
}
]
}
];
$scope.search={}；
});

无麸质
素食主义者









@developer033，因为我认为这是我应该做的，以获得最底层的对象。错了吗？请将$scope.search=[]
到$scope.search={}
或$scope.search={'type1'：null，'type2'：null}@JaeeunLee你能为这个做一把小提琴吗？好的，在你的第三个ng repeatitem仍然是一个数组。@developer033抱歉，JSON错误。修复并添加了plunker。似乎有错误。如果选中“无麸质”，则仅显示无麸质项目。但是，如果您取消选中它，该项目将消失。@JaeeunLee，我已修复它。
<body ng-app="bakeryMenuApp">
  <div class="wrap"  ng-controller="mainCtrl">

      <div class="search-filters">
         <div class="filter">
          <input name="gluteen" type="checkbox" ng-model='search.type1' data-ng-true-value='true' data-ng-false-value='false'>
          <label for="glueteen">Gluten Free</label>
          </div>
         <div class="filter">
          <input name="vegan" type="checkbox" ng-model='search.type2' data-ng-true-value='true' data-ng-false-value='false'>
          <label for="vegan">Vegan</label>
          </div>
      </div>

      <section class="content-category" ng-repeat="menu in menus">
        <div ng-repeat="(key, items) in menu" class="{{key}}">
         <h2>{{key}}</h2>
         <ul>
          <li ng-repeat="item in items | filter:search.type1 | filter:search.type2">
            <div class="img-container">
              <img src="{{item.image_url}}" alt="{{item.name}} image">
            </div>
            <h3>{{item.name}}</h3>
            <p>{{item.description}}</p>
            <p class="content-filters">{{item.is_vegan}}, {{item.is_gluten_free}}</p>
            <p class="price"><span>$</span>{{item.price}}</p>
          </li>
         </ul>
        </div>
      </section>

  </div>
</body>

var app = angular.module("bakeryMenuApp", []);
app.controller('MainCtrl', function($scope) { 
  $scope.search=[];
  $scope.menus = [{
    "brownies": [{
      "name": "Baker's Choice Bars Assortment",
      "price": "45",
      "description": "A beautiful and delicious assortment of Magnolia Bakery’s double fudge brownies, chocolate chunk blondies and magic cookie bars.",
      "image_url": "https://pantograph0.goldbely.com/s364/uploads/product_image/image/8346/bakers-choice-bars-assortment.1ddd25a1f59a89a1de2d0583dab50000.jpg",
      "is_vegan": true,
      "is_gluten_free": false
    }]
  }, {
    "cakes": [{
      "name": "Raseberry Lemon Cake",
      "price": "50",
      "description": "Vanilla crème fraîche cake layered with raspberry Swiss meringue buttercream and lemon curd filling, covered with raspberry buttercream.",
      "image_url": "http://www.empirecake.com/_main_site/wp-content/uploads/2014/12/Rasberry_Lemon_01_final_drkr-600.jpg",
      "is_vegan": false,
      "is_gluten_free": true
    }]
  }]
});