Question

我正在尝试使用多个下拉菜单进行过滤。例如，当缩小两个值和num时，在使用“value = 1，num = 5”进行搜索时没有相应的数据，但是会显示“id ='000'”的数据。我应该在哪里修理它？

plunker：http://plnkr.co/edit/IBRDuHYtSCUFV1xNxjh4?p=preview

HTML

<body ng-controller="MainCtrl">
<div>
    <div>
        <div>
            <span>value</span>
            <select class="form-control" ng-model="value_1">
                <option ng-repeat="value in product_value" value="{{value}}">{{value}}</option>
            </select>
            <span>num</span>
            <select class="form-control" ng-model="num_1">
                <option ng-repeat="num in product_num" value="{{num}}">{{num}}</option>
            </select>
        </div>
        <div>
            <span>value</span>
            <select class="form-control" ng-model="value_2">
                <option ng-repeat="value in product_value" value="{{value}}">{{value}}</option>
            </select>
            <span>num</span>
            <select class="form-control" ng-model="num_2">
                <option ng-repeat="num in product_num" value="{{num}}">{{num}}</option>
            </select>
        </div>
    </div>
      <table>
        <tr>
          <th>
            id
          </th>
          <th>
            name
          </th>
        </tr>
        <tr ng-repeat="products in products | filter:{main:{value:value_1}} | filter:{main:{num:num_1}} |
         filter:{main:{value:value_2}} | filter:{main:{num:num_2}}">
          <td>{{products.id}}</td>
          <td>{{products.name}}</td>
        </tr>
      </table>
</div>

JS

var app = angular.module('TestMode', []);

app.controller('MainCtrl', function($scope, $filter) {
  $scope.product_value = ["1", "2", "3", "4", "5"];
  $scope.product_num = ["1", "2", "3", "4", "5"];
  $scope.products = [
      {
        id: "000",
        name:'A',
        main:[
            {
              value: "1",
              num: "1"
            },{
              value: "1",
              num: "2"
            },{
              value: "1",
              num: "3"
            },{
              value: "2",
              num: "4"
            },{
              value: "2",
              num: "5"
            }
        ]
      },{
        id: "001",
        name:'B',
        main:[
            {
              value: "5",
              num: "5"
            },{
              value: "5",
              num: "4"
            },{
              value: "5",
              num: "3"
            },{
              value: "4",
              num: "2"
            },{
              value: "4",
              num: "1"
            }
        ]
      }
    ];

});

Answer 1

Use this below code instead of yours.

 ng-repeat="products in products | filter:{main:{value:value_1,num:num_1}} | 
 filter:{main:{value:value_2,num:num_2}}"

Working demo : http://plnkr.co/edit/K5Xq3QOo1Kfs5Lw5yiAJ?p=preview

Answer 2

Change products to product.

Always filter by 2 properties instead of 1.

<tr ng-repeat="product in products | filter:{main:{value:value_1,num:num_1}} | filter:{main:{value:value_1,num:num_1}}">
  <td>{{product.id}}</td>
  <td>{{product.name}}</td>
</tr>

http://plnkr.co/edit/VXz8h5y8273rgHL7uMgS?p=preview

具有多个下拉列表的角度过滤器

2 个答案: