複数のドロップダウンでフィルタリングしようとしています。 例えば、valueとnumの2つの数値で絞り込んだ場合、 "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"
}
]
}
];
});
でフィルタリング?関数呼び出しを使うと簡単に実現できます。 –
本当ですか?今回は角度を使用したかったのです。 – Bicepper