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
– Dhaval Marthak

2016-08-12 14:14:05 +00:00
Commented Aug 12, 2016 at 14:14 — Dhaval Marthak
– Dhaval Marthak, Commented Aug 12, 2016 at 14:14

Todd Miller · Accepted Answer · 2016-08-12 14:15:25Z

5

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.

answered Aug 12, 2016 at 14:15

Todd Miller

3011 silver badge6 bronze badges

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

Comments

Karol Klepacki · Accepted Answer · 2016-08-12 14:14:21Z

4

<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

answered Aug 12, 2016 at 14:14

Karol Klepacki

2,1181 gold badge20 silver badges30 bronze badges

Comments

Gustavo Gabriel · Accepted Answer · 2016-08-12 14:14:22Z

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, 2016 at 14:14

Gustavo Gabriel

1,2963 gold badges17 silver badges29 bronze badges

Comments

Naga Sai A · Accepted Answer · 2016-08-12 14:21:15Z

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, 2016 at 14:21

answered Aug 12, 2016 at 14:15

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:54:27Z

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, 2017 at 11:54

CommunityBot

11 silver badge

answered Aug 12, 2016 at 14:25

Thomas Zoé

4233 silver badges16 bronze badges

Comments

Pankaj Parkar · Accepted Answer · 2016-08-12 14:43:20Z

0

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");
})

edited Aug 12, 2016 at 14:43

answered Aug 12, 2016 at 14:30

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

Pankaj Parkar Over a year ago

@NithinKumarBiliya have you looked at this option as well??

Collectives™ on Stack Overflow

How to hide a row in a table in angularJS?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related