AngularJS Filter nach Kategorie

Ich versuche, Menü nach Kategorie anzuzeigen. Der Name jeder Kategorie ist der Name des Schlüssels eines Arrays von Menüelementen, z. B. "Brownies", "Kuchen".AngularJS Filter nach Kategorie

Das ist, was ich Referenzierung, aber etwas scheint weg zu sein:

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

Quelle

2016-07-01 Jaeeun Lee

Bitte posten Sie auch die JSON-Antwort. –

Bitte fügen Sie Ihre JSON auch –

hinzugefügt JSON @ hva.narola –

Sie können es erreichen, indem er den Zustand, in geeigneter Weise überprüft

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

Quelle

2016-07-01 05:49:45

Nizza! Kannst du es ein wenig erklären? –

@JaeeunLee Ich habe 'ng-show' zu 'li' hinzugefügt und überprüfe, ob die Variable' category' gleich der Taste ist und es das angesehene 'li' anzeigt. Das Klickereignis wird zu "a" hinzugefügt, um die angeklickte Variable auf die Variable "category" zu setzen. –

Sie benutzerdefinierte Filter verwenden, sollten Objektschlüssel und Verwendung filtern eine Funktion zum Festlegen der Kategorie per Klick.

können versuchen, wie diese

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>

und Controller:

$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

Quelle

2016-07-01 06:06:06

AngularJS Filter nach Kategorie

Antwort

Verwandte Themen