Question

我试图按类别显示菜单。每个类别的名称是一系列菜单项的键的名称，例如＆＃34;布朗尼蛋糕＆＃34;，＆＃34;蛋糕。＆＃34;

这就是我所引用的内容，但似乎有些事情发生了：

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

Answer 1

你可以通过适当的方式检查条件来实现它

控制器＆amp;＆amp;的 HTML

Answer 2

您应该使用自定义过滤器按对象键过滤，并使用函数通过单击设置类别。

可以尝试这样

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

AngularJS按类别筛选

2 个答案: