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.

Answer 1

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.

Answer 2

<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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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