角1.7过滤表基于关闭选择框

http://jsfiddle.net/ADukg/13415/角1.7过滤表基于关闭选择框

我有一个包含食物清单，通过与下面的选择框式过滤称为“订单”的对象。选择框包含订单食品类别的过滤器。我希望能够使用此选择框使用角度过滤出表格。

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

我正在角控制台错误： 错误：过滤器：在桌子上NG-重复foodCategories：使用过滤器时notarray 不阵列。

我该如何解决这个问题？

来源

2017-07-25 BDillan

'orders'不是数组，它是一个对象。你不能过滤对象。 – Claies

固定http://jsfiddle.net/ADukg/13417/ – Hackerman

我重新签名 - 它不是Angular - 那是Angular 2+ - 使用AngularJS – JGFMK

只需在您的orders数组中添加一个属性“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

来源

2017-07-26 06:48:43

角1.7过滤表基于关闭选择框

回答

相关问题