CODEWITHSUNDEEP
javascriptjqueryangularjs
wobsoriano
wobsoriano

Reputation: 13462

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

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.

Upvotes: 0

Views: 438

Answers (1)

Supradeep
Supradeep

Reputation: 3266

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>

Upvotes: 1

Related Questions