Question

我有一个名为＆＃39; orders＆＃39;包含食物清单，可通过下面的选择框按类型过滤。选择框包含订单的食品类别的过滤器。我希望能够使用此选择框过滤掉使用角度的表格。

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

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

我该如何解决这个问题？

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

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

Angular 1.7过滤表基于选择框

1 个答案: