AngularJS按类别过滤

AngularJS Filter By Category

本文关键字：过滤 AngularJS      更新时间：2023-09-26

我正在尝试按类别显示菜单。每个类别的名称是菜单项数组的键名，例如"布朗尼"、"蛋糕"。"

这是我引用的，但是有些东西似乎是off:

单击类别链接时筛选项目列表

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

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

控制器

,, 

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>

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

可以这样试试

: 

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

恰好演示/strong>

相关文章：