How to hide a row in a table in angularJS?

Question

HTML code to display table -

    <table class="table table-bordered table-striped table-condensed">
        <thead class="TableHeader"> 
            <tr>
                <th>Role</th>
                <th>Name</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody> 
            <tr ng-repeat="i in allCustomerInfoArray track by $index" ng-click="showCustomerinfo($index)">
                <td>{{i.role }}</td>
                <td>{{i.name}}</td>
                <td>{{i.id}}</td>
            </tr>
        </tbody>
    </table>

Angular JS code to display the customer info in the console log -

    $scope.showCustomerinfo=function(index) {
        console.log("table clicked row -- "+index);
        console.log("DOB -- "+$scope.allCustomerInfoArray[index].role);
        console.log("Age -- "+$scope.allCustomerInfoArray[index].name);
        console.log("Age -- "+$scope.allCustomerInfoArray[index].id);
        console.log("DOB -- "+$scope.allCustomerInfoArray[index].dob);
        console.log("Age -- "+$scope.allCustomerInfoArray[index].age);
    }

Now I want to modify the above code to hide the rows where the customer role is "XXX". Please let me know how to achieve it.

Note - I do not want to delete the customer with role "XXX" from allCustomerInfoArray.

Hint: Only render those rows which is having role='XXX'! – Dhaval Marthak Aug 12 '16 at 14:14 — Dhaval Marthak, Aug 12 '16 at 14:14

score 5 · Accepted Answer · answered Aug 12 '16 at 14:15

You can use ng-hide to do this. Like so:

<tr ng-repeat="i in allCustomerInfoArray track by $index"
    ng-click="showCustomerinfo($index)"
    ng-hide="i.role === 'XXX'">

If you want to pull the tag out of the DOM altogether, you can use ng-if:

<tr ng-repeat="i in allCustomerInfoArray track by $index"
    ng-click="showCustomerinfo($index)"
    ng-if="i.role !== 'XXX'">

But be warned, performance of ng-if isn't as good as ng-hide, but you will pull the tr tag completely out of the DOM if that's your thing.

score 4 · Answer 2 · answered Aug 12 '16 at 14:14

<table class="table table-bordered table-striped table-condensed">
    <thead class="TableHeader"> 
        <tr>
            <th>Role</th>
            <th>Name</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody> 
        <tr ng-repeat="i in allCustomerInfoArray track by $index" ng-click="showCustomerinfo($index)" ng-if="i.role!='XXX'>
            <td>{{i.role }}</td>
            <td>{{i.name}}</td>
            <td>{{i.id}}</td>
        </tr>
    </tbody>
</table>

OR

 ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')"

Read more: https://en.wikipedia.org/wiki/%3F:#JavaScript

score 0 · Answer 3 · answered Aug 12 '16 at 14:14

0

You show use ng-hide like so:

        <tr ng-repeat="i in allCustomerInfoArray track by $index" ng-click="showCustomerinfo($index)" ng-hide="i.role=='XXX'">

Hope it helps

answered Aug 12 '16 at 14:14

Gustavo Gabriel

1,378
2
17
28

Naga Sai A · Answer 4 · 2016-08-12T14:21:15.797

0

Use ng-hide='i.role=="XXX"' on the row

Or

ng-show!='i.role=="XXX"' Or

ng-if=='i.role!="XXX"'

Anyone of above works to get expected result

edited Aug 12 '16 at 14:21

answered Aug 12 '16 at 14:15

Naga Sai A

10,771
1
21
40

score 0 · Answer 5 · edited May 23 '17 at 11:54

0

all answers above are correct, but you should know that ng-if will remove the object from dom. ng-hide or ng-show will just hide it. Additional ng-if will create a own scope.

what is the difference between ng-if and ng-show/ng-hide

edited May 23 '17 at 11:54

Community

1
1

answered Aug 12 '16 at 14:25

Thomas Zoé

423
3
16

Pankaj Parkar · Answer 6 · 2016-08-12T14:43:20.973

You could use angular filter to achieve the same and alias it with as filterCustomer to use filtered result using filterCustomer anywhere on the page.

Markup

<tbody> 
    <tr ng-repeat="i in allCustomerInfoArray | filter: {role: 'XXX' } track by $index as filterCustomer" ng-click="showCustomerinfo($index)">
        <td>{{i.role }}</td>
        <td>{{i.name}}</td>
        <td>{{i.id}}</td>
    </tr>
</tbody>

More convenient way to implement a filter would be, use it in controller so that filter will not get evaluate of each digest cycle. Whenever you retrieve a collection at that time only you could filter it out.

$http.get('/api/getentity')
.then(function(res){
   $scope.filterCustomers = $filter('filter')(res.data, {role: 'XXX' }); //filtered result
}, 
function(res){
   console.log("Log error");
})

@NithinKumarBiliya have you looked at this option as well?? – Pankaj Parkar Aug 13 '16 at 12:16 — Pankaj Parkar, Aug 13 '16 at 12:16

How to hide a row in a table in angularJS?

6 Answers6