Count rows hidden by ng-show/hide/if

Question

I have a table which hides some rows from a table when a checkbox is selected. Initally it shows that count which I've precalculated. I'm using ng-show to hide/show a row. So the length function still returns the total count.

<input type="checkbox" ng-model="isRChecked" id="chck3" ng-change="ExcludeRChecked();"><label for="chck3">Exclude R</label>


<div>{{Detail.length}} Rows in Table</div>
<tbody>
  <tr ng-repeat="x in Detail" ng-show="excludeR(x.ID)">
    <td colspan="1">{{x.feature}}</td>
    <td colspan="1" ng-click="test(x.ID)">{{x.ID}}</td>
    <td colspan="1">{{x.Log}}</td>
  </tr>
</tbody>

I have to display the number of rows in the table. So when the checkbox is selected, the hidden row count from ng-show should be removed.

The angular function ExcludeR()

 $scope.excludeR=function(item){
            if($scope.isRChecked===false)
                return true;
                for(x in $scope.R){
                    if($scope.R[x]===item)
                    {                           
                        return false;
                    }
                }
                return true;

        };

Answer 1

<div>{{visibleDetailsCount}} Rows in Table</div>
<tbody>
  <tr ng-repeat="x in Detail" ng-show="excludeR(x.ID)">


$scope.excludeR(param){
   //...
   condition?$scope.visibleDetailsCount++:$scope.visibleDetailsCount--;
   //...
}

Answer 2

Prefilter Detail in controller

$scope.filteredDetail = $scope.Detail.filter(x => excludeR(x.ID))

<div>{{filteredDetail.length}} Rows in Table</div>
<tbody>
  <tr ng-repeat="x in filteredDetails track by x.ID ">
    <td colspan="1">{{x.feature}}</td>
    <td colspan="1" ng-click="test(x.ID)">{{x.ID}}</td>
    <td colspan="1">{{x.Log}}</td>
  </tr>
</tbody>