Question

在这里，我正在尝试创建一个包含美食广场菜单项的列表。我想根据输入框中的搜索过滤掉我的列表。但是使用AngularJS默认过滤器时，它不会对列表中存在的每个值应用过滤器。例如，从填充的结果中我可以根据项目名称（如关键字Idly，Dosa）和价格来过滤掉它，但不能与foodcourt名称，供应商名称（即kamath）和foodtype（即早餐），午餐，晚餐）。

HTML：

<div ng-app="fcApp" ng-controller="fcController">
    <div class="control">
        <input type="search" ng-model="txtSearch" placeholder="search here"/>
    </div>
    <div id="menu">
        <div ng-repeat="foodCourt in fcMenu" >

            <div ng-repeat="vendor in foodCourt.foodCourtDetails">

                <div ng-repeat="foodType in vendor.vendorDetails">
                    <div class="foodItem" ng-repeat="foodDetails in foodType.foodItemDetails | filter:txtSearch">
                            <div>{{foodDetails.itemName}} - {{foodType.foodTypeName}}</div>
                            <div>{{vendor.vendorName}} - {{foodCourt.foodCourtName}}</div>
                            <div>{{foodDetails.itemPrice}}</div>             
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

*{margin:0;padding:0;}body{background:#000;color:#fff;}
.control{display:block;margin:10px 0;}
.control input{width:100% !important;box-sizing:border-box;}
input[type="search"]{width:inherit;padding:0.7em 0.5em;}
.foodItem{border:2px solid #CCC;border-radius:6px;margin:5px 0;}

使用Javascript：

var fcJSON = '[{"foodCourtName":"FoodCourt1","foodCourtDetails":[{"vendorName":"Adigas","vendorDetails":[{"foodTypeName":"Breakfast","foodItemDetails":[{"itemName":"Idly - 2 Nos","itemDesc":"Idly - 2 Nos","itemPrice":" Rs. 20.00 ","itemComposition":"60gms each + 80 ml Chutney & 100 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Idly - vada ( 1 Idly + I vada )","itemDesc":"( 1 Idly + I vada )","itemPrice":" Rs. 25.00 ","itemComposition":"60 gms each piece+ 80 ml Chutney & 100 ml Sambar","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"Idly - vada ( 2 Idly + I vada )","itemDesc":"( 2 Idly + I vada )","itemPrice":" Rs. 35.00 ","itemComposition":"60 gms each piece+ 80 ml Chutney & 100 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Dosa - Plain","itemDesc":"Dosa - Plain","itemPrice":" Rs. 25.00 ","itemComposition":"80 gms + 60 ml Chutney & 80 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Dosa","itemDesc":"Masala/Onion / Rawa / Ragi / Vegetable / Wheat /Neer /GHEE ROST","itemPrice":" Rs. 32.00 ","itemComposition":"150 gms + 80 ml Chutney & 80 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"SPL Dosa","itemDesc":"GHEE MASALA/Rava masala","itemPrice":" Rs. 37.00 ","itemComposition":"150 gm + 80 ml Chutney & 80 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Sweet -","itemDesc":"Sweet - Payasam / Jalebi / Ladoo / Gulab Jamun / Mysore Pak / Burfi / etc","itemPrice":" Rs. 10.00 ","itemComposition":"80 ml / 35 gms","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Veg pulao","itemDesc":"Veg pulao","itemPrice":" Rs. 34.00 ","itemComposition":"250 gms rice +100 gms Raita ","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Mini Meal (South)","itemDesc":"Mini Meal (South)","itemPrice":" Rs. 45.00 ","itemComposition":"2 Chapathi+200grmRice +90ml Rasam+90ml Sambhar+90ml veg curry","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"South Indian MEAL","itemDesc":"VEGETARIAN. MEAL","itemPrice":" Rs. 60.00 ","itemComposition":"2 Chapathi+100grmRice +100grm rice bath+90mlRasam+90grmDry veg preperation+90ml grave veg preperation+90mlSambhar/dal+Curd+Pappad+sweet","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"NORTH INDIAN VEG. MEAL","itemDesc":"NORTH INDIAN VEG. MEAL","itemPrice":" Rs. 70.00 ","itemComposition":"1 Chapathi+1 Tanduri roti+100 grm biryani +100grm rice+90 ml Rasam+90grm veg dry +90ml curry+90 ml dal+Curd+Pappad+swet","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"NORTH KARNATAKA MEAL","itemDesc":"PLANTAIAN LEAF MEAL","itemPrice":" Rs. 95.00 ","itemComposition":"JOWA ROTI+ENNAGAI+KALU PALLYA+SOPPU PALLYA+RICE+SAMBAR+BAJJI+KOSAMBARI/CHATNI+BUTTER MILK+CURD+SALAD+SWEET","isVegetarian":"TRUE","isSpecial":"FALSE"}]},{"foodTypeName":"Snacks","foodItemDetails":[{"itemName":"Idly - 2 Nos","itemDesc":"Idly - 2 Nos","itemPrice":" Rs. 20.00 ","itemComposition":"60gms each + 80 ml Chutney & 100 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Idly - vada ( 1 Idly + I vada )","itemDesc":"( 1 Idly + I vada )","itemPrice":" Rs. 25.00 ","itemComposition":"60 gms each piece+ 80 ml Chutney & 100 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Idly - vada ( 2 Idly + I vada )","itemDesc":"( 2 Idly + I vada )","itemPrice":" Rs. 35.00 ","itemComposition":"60 gms each piece+ 80 ml Chutney & 100 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Rava Idly - 2 Nos","itemDesc":"Rava Idly - 2 Nos","itemPrice":" Rs. 32.00 ","itemComposition":"60 gms each + 80 ml Chutney & 100 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Dosa - Plain","itemDesc":"Dosa - Plain","itemPrice":" Rs. 25.00 ","itemComposition":"80 gms + 60 ml Chutney & 80 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Dosa","itemDesc":"Masala/Onion / Rawa / Ragi / Vegetable / Wheat /Neer /GHEE ROST","itemPrice":" Rs. 32.00 ","itemComposition":"150 gms + 80 ml Chutney & 80 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"SPL Dosa","itemDesc":"GHEE MASALA/Rava masala","itemPrice":" Rs. 37.00 ","itemComposition":"150 gm + 80 ml Chutney & 80 ml Sambar","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Dosa - Set","itemDesc":"3 NO","itemPrice":" Rs. 32.00 ","itemComposition":"60 gms each + 80 ml Chutney & 100 gms SAGU","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Uthappam","itemDesc":"Masala / Tomato / Onion / other","itemPrice":" Rs. 32.00 ","itemComposition":"200 gms + 80 ml Chutney & 80 ml SAGU","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Vada Single","itemDesc":"Vada","itemPrice":" Rs. 17.00 ","itemComposition":"60GRMS +60 ML CHATNI+80ML SAMBAR","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"Chow Chow Bath","itemDesc":"Chow Chow Bath","itemPrice":" Rs. 35.00 ","itemComposition":"120 gms each of Khara & 100 gms Kesari + 60 ml Chutney","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"Khara Bath - Upma","itemDesc":"Khara Bath - Upma","itemPrice":" Rs. 20.00 ","itemComposition":"120 gms + Chutney ","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Pongal","itemDesc":"Pongal","itemPrice":" Rs. 30.00 ","itemComposition":"250 gms + 60 ml Chutney + 80 ml Raita ","isVegetarian":"TRUE","isSpecial":"TRUE"}]}]}]},{"foodCourtName":"FoodCourt2","foodCourtDetails":[{"vendorName":"Dolphin","vendorDetails":[{"foodTypeName":"Breakfast","foodItemDetails":[{"itemName":"Masala Chaas","itemDesc":"Spicy butter milk, cold","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of masala butter milk","isVegetarian":"TRUE","isSpecial":"FALSE"}]},{"foodTypeName":"Lunch","foodItemDetails":[{"itemName":"Masala Chaas","itemDesc":"Spicy butter milk, cold","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of masala butter milk","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Lassi","itemDesc":"Sweet curd","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of sweet lassi","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Amritsari Kheer","itemDesc":"Rice kheer ","itemPrice":" Rs. 30.00 ","itemComposition":"110 ml of Rice Kheer","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle paranthas","itemDesc":"Cholle 3 paranthas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 3 Tandoori paranthas (60 grams Each)+ Raita 85 ml.","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"cholle kulchas","itemDesc":"cholle stuffed 2 aloo kulchas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 2 Kulchas (60 grams Each)+ Salad 85 ml+ Imli chutney 80 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle rice ","itemDesc":"cholle, Jeera basmathi rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams cholle+ 200 grams Basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Dal rice","itemDesc":"Dal, basmathi rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams Dal+200 grams basmathi rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"Dal paranthas","itemDesc":"Dal, 3 tandoori paranthas","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams dal+ 3 Tandoori paranthas+ 60 grams salad","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"butter paneer paranthas","itemDesc":"butter paneer gravy, 3 tandoori paranthas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams butter paneer gravy+ 4 pieces of paneer+ 3 tandoori paranthas+ 60 grams salad","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"butter paneer rice","itemDesc":"butter paneer gravy, basmathi jeera rice.","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams butter paneer gravy+ 4 pieces of paneer+ 200 grams of basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Kadi Pakoda rice","itemDesc":"Kadi pakoda, basmathi jeera rice.","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams Kadi pakoda+200 grams basmathi jeera rice+Raita 85 ml.","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Rajma parantha","itemDesc":"Rajma ,3 tandoori paranthas","itemPrice":" Rs. 70.00 ","itemComposition":"160 Rajma+ 3 tandoori paranthas(60 grams each)+60 grams salad","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"Rajma rice","itemDesc":"Rajma, basmathi jeera rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams rajma+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Butter chicken rice","itemDesc":"Butter chicken, 3 tandoori paranthas","itemPrice":" Rs. 90.00 ","itemComposition":"120 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"},{"itemName":"Butter chicken paranthas ","itemDesc":"Butter chicken, 3 tandoori paranthas ","itemPrice":" Rs. 90.00 ","itemComposition":"120 grams chicken+ 3 tandoori paranthas (60 grams each)+ 60 grams salad","isVegetarian":"FALSE","isSpecial":"TRUE"},{"itemName":"Chicken Curry paranthas ","itemDesc":"Chicken curry,3 tandoori paranthas","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+ 3 tandoori paranthas (60 grams each)+ 60 grams salad","isVegetarian":"FALSE","isSpecial":"FALSE"},{"itemName":"Chicken curry rice ","itemDesc":"Chicken curry, basmathi jeers rice.","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"}]},{"foodTypeName":"Snacks","foodItemDetails":[{"itemName":"Masala Chaas","itemDesc":"Spicy butter milk, cold","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of masala butter milk","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Lassi","itemDesc":"Sweet curd","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of sweet lassi","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Amritsari Kheer","itemDesc":"Rice kheer ","itemPrice":" Rs. 30.00 ","itemComposition":"110 ml of Rice Kheer","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle paranthas","itemDesc":"Cholle 3 paranthas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 3 Tandoori paranthas (60 grams Each)+ Raita 85 ml.","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"cholle kulchas","itemDesc":"cholle stuffed 2 aloo kulchas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 2 Kulchas (60 grams Each)+ Salad 85 ml+ Imli chutney 80 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle rice ","itemDesc":"cholle, Jeera basmathi rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams cholle+ 200 grams Basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Chicken Curry paranthas ","itemDesc":"Chicken curry,3 tandoori paranthas","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+ 3 tandoori paranthas (60 grams each)+ 60 grams salad","isVegetarian":"FALSE","isSpecial":"TRUE"},{"itemName":"Chicken curry rice ","itemDesc":"Chicken curry, basmathi jeers rice.","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"}]},{"foodTypeName":"Dinner","foodItemDetails":[{"itemName":"Masala Chaas","itemDesc":"Spicy butter milk, cold","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of masala butter milk","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Lassi","itemDesc":"Sweet curd","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of sweet lassi","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Amritsari Kheer","itemDesc":"Rice kheer ","itemPrice":" Rs. 30.00 ","itemComposition":"110 ml of Rice Kheer","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle paranthas","itemDesc":"Cholle 3 paranthas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 3 Tandoori paranthas (60 grams Each)+ Raita 85 ml.","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"cholle kulchas","itemDesc":"cholle stuffed 2 aloo kulchas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 2 Kulchas (60 grams Each)+ Salad 85 ml+ Imli chutney 80 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle rice ","itemDesc":"cholle, Jeera basmathi rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams cholle+ 200 grams Basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Dal rice","itemDesc":"Dal, basmathi rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams Dal+200 grams basmathi rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"Dal paranthas","itemDesc":"Dal, 3 tandoori paranthas","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams dal+ 3 Tandoori paranthas+ 60 grams salad","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"butter paneer paranthas","itemDesc":"butter paneer gravy, 3 tandoori paranthas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams butter paneer gravy+ 4 pieces of paneer+ 3 tandoori paranthas+ 60 grams salad","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"butter paneer rice","itemDesc":"butter paneer gravy, basmathi jeera rice.","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams butter paneer gravy+ 4 pieces of paneer+ 200 grams of basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Kadi Pakoda rice","itemDesc":"Kadi pakoda, basmathi jeera rice.","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams Kadi pakoda+200 grams basmathi jeera rice+Raita 85 ml.","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Rajma parantha","itemDesc":"Rajma ,3 tandoori paranthas","itemPrice":" Rs. 70.00 ","itemComposition":"160 Rajma+ 3 tandoori paranthas(60 grams each)+60 grams salad","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"Rajma rice","itemDesc":"Rajma, basmathi jeera rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams rajma+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Butter chicken rice","itemDesc":"Butter chicken, 3 tandoori paranthas","itemPrice":" Rs. 90.00 ","itemComposition":"120 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"},{"itemName":"Butter chicken paranthas ","itemDesc":"Butter chicken, 3 tandoori paranthas ","itemPrice":" Rs. 90.00 ","itemComposition":"120 grams chicken+ 3 tandoori paranthas (60 grams each)+ 60 grams salad","isVegetarian":"FALSE","isSpecial":"TRUE"},{"itemName":"Chicken Curry paranthas ","itemDesc":"Chicken curry,3 tandoori paranthas","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+ 3 tandoori paranthas (60 grams each)+ 60 grams salad","isVegetarian":"FALSE","isSpecial":"FALSE"},{"itemName":"Chicken curry rice ","itemDesc":"Chicken curry, basmathi jeers rice.","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"}]}]}]},{"foodCourtName":"FoodCourt3","foodCourtDetails":[{"vendorName":"Aathapar","vendorDetails":[{"foodTypeName":"Breakfast","foodItemDetails":[{"itemName":"Masala Chaas","itemDesc":"Spicy butter milk, cold","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of masala butter milk","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Lassi","itemDesc":"Sweet curd","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of sweet lassi","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Amritsari Kheer","itemDesc":"Rice kheer ","itemPrice":" Rs. 30.00 ","itemComposition":"110 ml of Rice Kheer","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle paranthas","itemDesc":"Cholle 3 paranthas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 3 Tandoori paranthas (60 grams Each)+ Raita 85 ml.","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"cholle kulchas","itemDesc":"cholle stuffed 2 aloo kulchas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 2 Kulchas (60 grams Each)+ Salad 85 ml+ Imli chutney 80 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle rice ","itemDesc":"cholle, Jeera basmathi rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams cholle+ 200 grams Basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Chicken Curry paranthas ","itemDesc":"Chicken curry,3 tandoori paranthas","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+ 3 tandoori paranthas (60 grams each)+ 60 grams salad","isVegetarian":"FALSE","isSpecial":"TRUE"},{"itemName":"Chicken curry rice ","itemDesc":"Chicken curry, basmathi jeers rice.","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"}]},{"foodTypeName":"Lunch","foodItemDetails":[{"itemName":"Chicken curry rice ","itemDesc":"Chicken curry, basmathi jeers rice.","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"}]},{"foodTypeName":"Snacks","foodItemDetails":[{"itemName":"Masala Chaas","itemDesc":"Spicy butter milk, cold","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of masala butter milk","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Lassi","itemDesc":"Sweet curd","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of sweet lassi","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Amritsari Kheer","itemDesc":"Rice kheer ","itemPrice":" Rs. 30.00 ","itemComposition":"110 ml of Rice Kheer","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle paranthas","itemDesc":"Cholle 3 paranthas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 3 Tandoori paranthas (60 grams Each)+ Raita 85 ml.","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"cholle kulchas","itemDesc":"cholle stuffed 2 aloo kulchas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 2 Kulchas (60 grams Each)+ Salad 85 ml+ Imli chutney 80 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle rice ","itemDesc":"cholle, Jeera basmathi rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams cholle+ 200 grams Basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Chicken Curry paranthas ","itemDesc":"Chicken curry,3 tandoori paranthas","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+ 3 tandoori paranthas (60 grams each)+ 60 grams salad","isVegetarian":"FALSE","isSpecial":"TRUE"},{"itemName":"Chicken curry rice ","itemDesc":"Chicken curry, basmathi jeers rice.","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"}]},{"foodTypeName":"Dinner","foodItemDetails":[{"itemName":"Masala Chaas","itemDesc":"Spicy butter milk, cold","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of masala butter milk","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Chicken Curry paranthas ","itemDesc":"Chicken curry,3 tandoori paranthas","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+ 3 tandoori paranthas (60 grams each)+ 60 grams salad","isVegetarian":"FALSE","isSpecial":"FALSE"},{"itemName":"Chicken curry rice ","itemDesc":"Chicken curry, basmathi jeers rice.","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"}]}]},{"vendorName":"Tadka Singh","vendorDetails":[{"foodTypeName":"Breakfast","foodItemDetails":[{"itemName":"Masala Chaas","itemDesc":"Spicy butter milk, cold","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of masala butter milk","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Lassi","itemDesc":"Sweet curd","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of sweet lassi","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Amritsari Kheer","itemDesc":"Rice kheer ","itemPrice":" Rs. 30.00 ","itemComposition":"110 ml of Rice Kheer","isVegetarian":"TRUE","isSpecial":"TRUE"},{"itemName":"Cholle paranthas","itemDesc":"Cholle 3 paranthas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 3 Tandoori paranthas (60 grams Each)+ Raita 85 ml.","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"cholle kulchas","itemDesc":"cholle stuffed 2 aloo kulchas","itemPrice":" Rs. 80.00 ","itemComposition":"160 grams cholle+ 2 Kulchas (60 grams Each)+ Salad 85 ml+ Imli chutney 80 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Cholle rice ","itemDesc":"cholle, Jeera basmathi rice","itemPrice":" Rs. 70.00 ","itemComposition":"160 grams cholle+ 200 grams Basmathi jeera rice+ raita 85 ml","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Chicken Curry paranthas ","itemDesc":"Chicken curry,3 tandoori paranthas","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+ 3 tandoori paranthas (60 grams each)+ 60 grams salad","isVegetarian":"FALSE","isSpecial":"FALSE"},{"itemName":"Chicken curry rice ","itemDesc":"Chicken curry, basmathi jeers rice.","itemPrice":" Rs. 90.00 ","itemComposition":"130 grams chicken+200 grams basmathi jeera rice+ raita 85 ml","isVegetarian":"FALSE","isSpecial":"FALSE"}]},{"foodTypeName":"Lunch","foodItemDetails":[{"itemName":"Masala Chaas","itemDesc":"Spicy butter milk, cold","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of masala butter milk","isVegetarian":"TRUE","isSpecial":"FALSE"},{"itemName":"Lassi","itemDesc":"Sweet curd","itemPrice":" Rs. 30.00 ","itemComposition":"320 ml of sweet lassi","isVegetarian":"TRUE","isSpecial":"FALSE"}]}]}]}]';

var app = angular.module('fcApp', []);
app.controller('fcController', function ($scope) {
$scope.fcMenu = eval('(' + fcJSON + ')');
});

我应该如何应用过滤器以便我能够对列表中的所有项目应用过滤器（即itemname，foodtype，vendor，foodcourt和price？

提前致谢

Answer 1

首先，您必须将分层数据转换为平面数据 喜欢：

 {"foodCourtName":"FoodCourt1","vendorName":"Adigas","foodTypeName":"Breakfast",..}

你可以在JS中这样做：

    var flatData=[];

    for (var i = 0; i < fcJSON.length; i++) {

    var flatDataObj=new Object();

    flatDataObj.foodCourtName=fcJSON.foodCourtName;

    if (fcJSON[i].foodCourtDetails) {

    flatDataObj.vendorName=fcJSON[i].foodCourtDetails.vendorName;

    }

    if (fcJSON[i].foodCourtDetails.vendorDetails) {

    flatDataObj.foodTypeName=fcJSON[i].foodCourtDetails.vendorDetails.foodTypeName;

    }

    //nd so on....

    flatData.push(flatDataObj);
    }

现在，您可以使用Angular filter

提供过滤器和过滤数据

Answer 2

创建自定义过滤器＆＃34; myFilter＆＃34; ，如下所示： JSFiddle链接供参考 - https://jsfiddle.net/bz5zon4L/#

 <div ng-controller="fcController">
    <div class="control">
      <input type="search" ng-model="txtSearch" placeholder="search here" />
    </div>
    <div id="menu">
      <div ng-repeat="foodCourt in fcMenu">

        <div ng-repeat="vendor in foodCourt.foodCourtDetails">

          <div ng-repeat="foodType in vendor.vendorDetails">
            <div class="foodItem" ng-repeat="foodDetails in foodType.foodItemDetails | myFilter:txtSearch:foodType:vendor:foodCourt">
              <div>{{foodDetails.itemName}} - {{foodType.foodTypeName}}</div>
              <div>{{vendor.vendorName}} - {{foodCourt.foodCourtName}}</div>
              <div>{{foodDetails.itemPrice}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

app.filter('myFilter', function() {
    return function(item, textSearch, foodType, vendor, foodCourt) {
        var result = [];
        if (textSearch && item && foodType && vendor && foodCourt) {
            for (var i = 0; i < item.length; i++) {
                var tempSearch = item[i].itemName + foodType.foodTypeName + vendor.vendorName + foodCourt.foodCourtName + item[i].itemPrice;
                if (tempSearch) {
                    var searchIndex = tempSearch.toLowerCase().search(textSearch.toLowerCase());
                    if (searchIndex >= 0) {
                        result.push(item[i]);
                        tempSearch = '';
                    }
                }
            }
            return result;
        }
        return item;
    }
});

Answer 3

这里有许多好的指针和答案。可能有另一种方法可以实现你想要的额外优势。你可以看到提出了两个解决方案，

添加自定义过滤器
展平您的数据

只需对UI进行一些更改即可实现这些解决方案的替代方案。您可以让用户使用多个搜索框（每个级别一个）优化搜索数据，或让他们使用下拉列表选择要搜索的类别。

<div ng-repeat="foodCourt in fcMenu | filter:foodCourtSearch">
    <div ng-repeat="vendor in foodCourt.foodCourtDetails | filter:vendorSearch">
      <div ng-repeat="foodType in vendor.vendorDetails">
        <div class="foodItem" ng-repeat="foodDetails in foodType.foodItemDetails | filter:foodItemSearch">

Plunker Demo for multiple search boxes

单个全方位框可能是您的要求，但这是解决问题的一种方法。拥有多个搜索框将有助于用户改进他们的搜索（如同在foodcourt1中是否有午餐），单个搜索框无法完成

P.S：重要使用 eval 不是一个好习惯，请改用angular.fromJson(fcJSON);。

具有嵌套对象的AngularJS过滤器

3 个答案: