Bicepper
Bicepper

Reputation: 33

Angular filter with multiple dropdown

I am trying to filter with multiple dropdowns. For example, when narrowing down by two numbers of value and num, there is no corresponding data when searching with "value = 1, num = 5", but data of "id = '000'" is displayed It will result. Where should I fix it?

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

});

Upvotes: 3

Views: 2633

Answers (2)

huan feng
huan feng

Reputation: 8623

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

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38663

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

Upvotes: 2

Related Questions