AngularJS使用布爾值多鍵過濾

我想設置一個過濾系統，其中包含兩個過濾器「純素」和/或「無麩質」食物菜單。每個菜單項目對象都有「is_vegan」和「is_gluten free」，它們可以是真或假。AngularJS使用布爾值多鍵過濾

我試過用ng-models和angular的過濾函數使用複選框。

當前系統的問題是，即使我想搜索某些對於無麩質成分爲真的項目，它也會顯示「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 
    }] 
    }] 
});

來源

2016-07-03 Jaeeun Lee

@ developer033因爲我認爲這就是我應該做的就是最底層的對象。這是錯的嗎？ –

請'$ scope.search = [];'爲'$ scope.search = {};'或'$ scope.search = {'type1'：null，'type2'：null};' –

@JaeeunLee can你爲此做了一個小提琴？ –

要由多個屬性篩選，你的情況，你應該補充一點：filter: { is_gluten_free: search.is_gluten_free, is_vegan: search.is_vegan }。

另外，當你需要使用嵌套的ng-repeat時，很好用ng-repeat-start/end指令。

這裏是一個片段的工作：

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 = {}; 
 
});

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

來源

2016-07-03 02:11:24 developer033

似乎有錯誤。如果你檢查「無麩質」，只有無麩質食品顯示。但是，如果喲取消選中，則該項目消失。 –

@JeeeunLee，我修好了。 – developer033

太棒了，謝謝！ –

AngularJS使用布爾值多鍵過濾

回答

相關問題