Nithin Kumar Biliya Nithin Kumar Biliya - 3 months ago 22
Javascript Question

How to hide a row in a table in angularJS?

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

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.