基于选择框的Angular 1.7过滤表答案

【问题标题】：Angular 1.7 Filtering Table based off select box基于选择框的Angular 1.7过滤表
【发布时间】：2017-07-26 14:48:43
【问题描述】：

http://jsfiddle.net/ADukg/13415/

我有一个名为“订单”的对象，其中包含食物列表，可使用下面的选择框按类型过滤。选择框包含订单食品类别的过滤器。我希望能够使用此选择框使用角度过滤掉表格。

$scope.orders = { 
              "order1": {food_name: "apple", type: 1},
              "order2": {food_name: "banana", type: 1},
              "order3": {food_name: "carrot", type: 2},
              "order4": {food_name: "cereal", type: 3},
              "order5": {food_name: "wheat", type: 3}
              }

$scope.foodCategories = [{id:0,name:"All"}, {id:1,name:"Fruit"},{id:2,name:"Vegatable"}, {id:3,name:"Grains"}];

HTML：

<div ng-app = "myApp" ng-controller="foodCntrl">
 Select Food Type:
 <select 
        class="form-control" ng-model="foodCategories" ng-options="type as type.name for type in foodCategories">
 </select>

  <table class="table">
       <thead>
        <tr>
         <th>Food Name</th>
        </tr>
      </thead>
      <tbody>
       <tr ng-repeat="f in orders | filter:foodCategories.id">
             <td>{{f.food_name}}</td>
       </tr>
  </tbody>
</table>

 </div>

我收到 Angular 控制台错误： 错误：过滤器：notarray 在表 ng-repeat 上使用 filter:foodCategories 时不是数组。

我该如何解决这个问题？

【问题讨论】：

orders 不是一个数组，它是一个对象。你不能过滤对象。
固定jsfiddle.net/ADukg/13417
我重新标记了 - 它不是 Angular - 那是 Angular 2+ - 使用 AngularJS

标签： angularjs angularjs-filter

【解决方案1】：

只需在您的订单数组中为属性“type”添加一个过滤器，并为“foodCategories”将“All”类别的 id 设为空字符串 {id:"",name:"All"}。

  <table class="table">
   <thead>
    <tr>
     <th>Food Name</th>
    </tr>
  </thead>
  <tbody>
   <tr ng-repeat="f in orders | filter:{type: doorTypeSelect.id}">
         <td>{{f.food_name}}</td>
   </tr>

这是一个有效的 plunkr：http://plnkr.co/edit/4V0i1AIGRovnOUSp7eom?p=preview

【讨论】：