Question

我正在尝试为食物菜单设置一个带有两个过滤器“素食主义者”和/或“无面筋”的过滤系统。每个菜单项对象都有“is_vegan”和“is_gluten free”，无论是true还是false。

我尝试过使用ng-models和angular's过滤器功能的复选框。

当前系统存在的问题是它会显示一个“is_vegan：true”的项目，即使我想搜索一些对于无谷蛋白而言真实的东西。

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

HTML：

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

JS：

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
    }]
  }]
});

Answer 1

要按多个属性进行过滤，在您的情况下，您应该添加：filter: { is_gluten_free: search.is_gluten_free, is_vegan: search.is_vegan }。

此外，当您需要使用嵌套的ng-repeat时，最好使用ng-repeat-start / end指令。

这是一个代码片段：

＆＃13;

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
$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":false,
         "is_gluten_free":true
       }
     ]
   },
   {  
      "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":false
        }
      ]
   },
   {  
      "desserts":[  
        {  
          "name":"Whipped Cream",
          "price":25.5,
          "description":"Whipped cream is cream that is whipped by a whisk or mixer until it is light and fluffy. Whipped cream is often sweetened and sometimes flavored with vanilla, and is often called Chantilly cream or crème Chantilly.",
          "image_url":"http://cf.houseofyumm.com/wp-content/uploads/2014/11/Peppermint-Whipped-Cream2.jpg",
          "is_vegan":true,
          "is_gluten_free":true
        }
      ]
   }
];
  
  $scope.search = {};
});

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js">
</script>
</head>
<body ng-controller="mainCtrl">
  <div class="wrap">
    <div class="search-filters">
      <div class="filter">
        <input name="gluteen" type="checkbox" ng-model='search.is_gluten_free' data-ng-false-value=''>
        <label for="glueteen">Gluten Free</label>
      </div>
      <div class="filter">
        <input name="vegan" type="checkbox" ng-model='search.is_vegan' data-ng-false-value=''>
        <label for="vegan">Vegan</label>
      </div>
    </div>
    <section class="content-category" ng-repeat="menu in menus">
      <ul>
        <li ng-repeat-start="(key, items) in menu" ng-class="key">
          <h2 ng-bind="key"></h2>
        </li>
        <li ng-repeat-end ng-repeat="item in items | filter: { is_gluten_free: search.is_gluten_free, is_vegan: search.is_vegan }">
          <div class="img-container">
            <img ng-src="{{item.image_url}}" alt="{{item.name}} image">
          </div>
          <h3 ng-bind="item.name"></h3>
          <p ng-bind="item.description"></p>
          <p ng-bind="'Vegan: ' + item.is_vegan + ', Gluten free: ' + item.is_gluten_free" class="content-filters"></p>
          <p ng-bind="item.price | currency" class="price"></p>
        </li>
      </ul>
    </section>
  </div>
</body>
</html>

＆＃13;

AngularJS使用布尔值按多个键过滤

1 个答案: