How to hide a row in a table in angularJS?
<p>HTML code to display table -</p>

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

<p>Angular JS code to display the customer info in the console log -</p>

<pre><code>    $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);
    }
</code></pre>

<p>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.</p>

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