How to hide table row based on option value in AngularJS?

Question

So I have a dropdown..

<select ng-model="dropdown">
    <option ng-value="1">1</option>
    <option ng-value="2">2</option>
    <option ng-value="all">All</option>
</select>

and a table..

<table>
    <tr ng-repeat="d in data">
        <td ng-bind="d.number"></td> // 0 or 1
        <td>Other TD's</td>
        <td>Other TD's</td>
    </tr>
</table>

What I wanted to do is to when I select for example number 2 in the dropdown, all other rows in the table will be hidden except the row with ng-bind="d.number" that is equal to 2.

So what I tried so far is this

<table>
    <tr ng-repeat="d in data" ng-if="d.number == dropdown">
        <td ng-bind="d.number"></td> // 0 or 1
        <td>Other TD's</td>
        <td>Other TD's</td>
    </tr>
</table>

But when I select all in the dropdown, the table is empty already.

Is there a cleaner way to do this? Thanks in advance.

maybe have you tried something like: <tr ng-repeat="d in data" ng-if="d.number == dropdown || d.number == 'all'"> — federico scamuzzi
– federico scamuzzi, Commented Jan 7, 2017 at 15:11
maybe use filter? something like that <tr ng-repeat="d in data | filter:{number:dropdown}" — Max Koretskyi
– Max Koretskyi, Commented Jan 7, 2017 at 15:12

Supradeep · Accepted Answer · 2017-01-07 15:31:41Z

1

You can use the angular filter to do that like below : Plunkr

<table>
<tr ng-repeat="d in data | filter: {number: dropdown||undefined}">
 <td ng-bind="d.number"></td> // 0 or 1
 <td>Other TD's</td>
 <td>Other TD's</td>
</tr>
</table>

edited Jan 7, 2017 at 15:31

answered Jan 7, 2017 at 15:19

Supradeep

3,2661 gold badge18 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

How to hide table row based on option value in AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related