Reputation: 33
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
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
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