Angular JS, filter table with a select box

Question

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>

With a select box, it is best to use ng-options. docs.angularjs.org/api/ng/directive/select — Jared
– Jared, Commented Sep 8, 2014 at 14:47

Malkus · Accepted Answer · 2013-05-24 15:15:32Z

9

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>

edited May 24, 2013 at 15:15

answered May 24, 2013 at 15:08

Malkus

3,7262 gold badges27 silver badges39 bronze badges

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

Comments

Ven · Accepted Answer · 2013-05-24 14:10:34Z

1

I think you're looking for ng-filter and the filter filter : http://docs.angularjs.org/api/ng.filter:filter

answered May 24, 2013 at 14:10

Ven

19k2 gold badges44 silver badges62 bronze badges

Collectives™ on Stack Overflow

Angular JS, filter table with a select box

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related