Angular JS, filter table with a select box
Solution 1
I would recommend using the ng-filter.
This link is a simple example using a to-do list. jsfiddle using ng-filter
You will need to bind whatever input you are using with ng-model="varname"
The ng-filter defaults to all fields in the array. It can be filtered to a single column or point to a function in your controller.
Search Field
<select ng-model="searchparam">
<option value="1">One</option>
<option value="2">Two</option>
</select>
To Search a single column
<select ng-model="searchparam.columnOne">
<option value="1">One</option>
<option value="2">Two</option>
</select>
Repeated Section
(the filter model stays the same even when your input specifies a specific column)
<tr ng-repeat="dimension in dimensions | filter: searchparam">
<td>{{dimension.columnOne}}</td>
<td>{{dimension.columnTwo}}</td>
</tr>
Solution 2
I think you're looking for ng-filter and the filter
filter : http://docs.angularjs.org/api/ng.filter:filter
Joe
Updated on December 07, 2020Comments
-
Joe over 3 years
I have a table. I want to filter the table depending on which value is choosen in an select box. The comparison value is {{pipe.pipe_id}} in the select box and {{dimension.pipe_id}} in the table. Guess there's a simple solution for this? Any suggestion?
Pipe: <select id="select01"> <option ng-repeat="pipe in pipes">{{pipe.code}} - {{pipe.title_en}}</option> </select> <table class="table table-striped"> <thead> <tr> <th>Pipe</th> <th>Size</th> <th>Inner diameter</th> <th>Outer diameter</th> </tr> </thead> <tbody> <tr ng-repeat="dimension in dimensions" > <td>{{dimension.pipe_id}}</td> <td>{{dimension.nominalsize}}</td> <td>{{dimension.innerdiameter}}</td> <td>{{dimension.outerdiameter}}</td> </tr> </tbody> </table>