Angular filter with multiple dropdown

Question

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

});

Why you have to use angular filter? It can be achieve easily by using a function call. — huan feng
– huan feng, Commented Nov 13, 2017 at 5:56

Ramesh Rajendran · Accepted Answer · 2017-11-13 06:05:55Z

2

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

answered Nov 13, 2017 at 6:05

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

huan feng · Accepted Answer · 2017-11-13 06:20:06Z

1

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

answered Nov 13, 2017 at 6:20

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Collectives™ on Stack Overflow

Angular filter with multiple dropdown

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related