AngularJSカテゴリ別フィルター

カテゴリ別にメニューを表示しようとしています。各カテゴリの名前は、「ブラウニー」、「ケーキ」などのメニュー項目の配列のキーの名前です。AngularJSカテゴリ別フィルター

これは私が参照しています何ですが、何かがオフであるように思わ：

filter list of items when clicking category link

HTML：

<section class="choices"> 
    <div class="categories"> 
    <ul> 
    <li ng-repeat="menu in fullMenu"> 
     <a ng-repeat="(key,val) in menu" href="" ng-click="categoryFilters.category = {{key}}">{{key}} 
     </a> 
    </li> 
    </ul> 
    </div> 

</section> 

<section class="category" ng-repeat="menu in fullMenu | filter: categoryFilters"> 

    <div ng-repeat="items in menu"> 
    <ul> 
    <li ng-repeat="item in items"> 
     <img src="{{item.image_url}}"> 
     <h3>{{item.name}}</h3> 
     <p>{{item.description}}</p> 
     <p><span>$</span>{{item.price}}</p> 
    </li> 
    </ul> 
    </div> 

</section>

JS：

angular.module('bakeryMenuApp') 
    .controller('mainCtrl', function($scope, dataService) { 
    dataService.getMenus(function(response) { 
     $scope.fullMenu = response.data.menus; 
     $scope.categoryFilters = {} 
    }); 
    })

JSON：

{ 
    "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":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":false 
      } 
     ] 
     } 
    ] 
}

出典

2016-07-01 Jaeeun Lee

JSON応答も投稿してください。 –

JSONも貼り付けてください –

JSON @ hva.narola –

あなたが適切な方法であなたがオブジェクトキーと使用してフィルタリングするカスタムフィルタを使用する必要があります

コントローラ & & HTML

var app = angular.module('app', []); 
 
app.controller('ctrl', function($scope) { 
 
$scope.category = ''; 
 
    $scope.categoryList = function(value) { 
 
    $scope.category = value; 
 
    } 
 
    $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": 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": false 
 
    }] 
 
    }] 
 
});

form.ng-pristine { 
 
    background-color: lightblue; 
 
} 
 

 
form.ng-dirty { 
 
    background-color: pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="app" ng-controller="ctrl"> 
 
    <section class="choices"> 
 
    <div class="categories"> 
 
     <ul> 
 
     <li ng-repeat="menu in menus"> 
 
      <a ng-repeat="(key,val) in menu" href="" ng-click="categoryList(key)">{{key}} 
 
     </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </section> 
 
    <section class="category" ng-repeat="menu in menus"> 
 
    <div ng-repeat="(key, items) in menu"> 
 
     <ul> 
 
     <li ng-repeat="item in items" ng-show="category == key"> 
 
      <div> 
 
      <img src="{{item.image_url}}"> 
 
      <h3>{{item.name}}</h3> 
 
      <p>{{item.description}}</p> 
 
      <p><span>$</span>{{item.price}}</p> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div>

出典

2016-07-01 05:49:45

Nice！少し説明できますか？ –

@JaeeunLee 'ng-show'を' li'に追加し、変数 'category'がキーと等しいかどうかをチェックし、' li'を表示します。 clickイベントは 'a'に追加され、クリックされた変数を' category'変数に設定します。 –

を条件をチェックして、それを達成することができますクリックでカテゴリを設定する機能。

この

Htmlののように試すことができます：

<section class="choices"> 
    <div class="categories"> 
     <ul> 
     <li ng-repeat="menu in fullMenu"> 
      <a ng-repeat="(key,val) in menu" href="" ng-click="setFilterCategory(key)">{{key}} 
     </a> 
     </li> 
     </ul> 
    </div> 
    </section> 
    <section class="category" ng-repeat="menu in fullMenu | filter: filterByCategory"> 
    <div ng-repeat="items in menu"> 
     <ul> 
     <li ng-repeat="item in items"> 
      <img src="{{item.image_url}}"> 
      <h3>{{item.name}}</h3> 
      <p>{{item.description}}</p> 
      <p> 
      <span>$</span> {{item.price}} 

      </p> 
     </li> 
     </ul> 
    </div> 
    </section>

とコントローラ：

$scope.selectedCategory = ''; 

    $scope.setFilterCategory = function(value) { 
    $scope.selectedCategory = value; 
    }; 

    $scope.filterByCategory = function(item) { 
    if ($scope.selectedCategory) 
     return $scope.selectedCategory === Object.keys(item)[0]; 
    else 
     return item; 
    };

PLUNKER DEMO

出典

2016-07-01 06:06:06

AngularJSカテゴリ別フィルター

答えて

関連する問題