ng-show is not working with ng-repeat - angularjs

Question

Below is my table markup
<tr ng-show="paginate({{$index+1}})" ng-repeat="x in ProductInfo_Pager | orderBy :sortType:sortReverse | filter:searchText | limitTo : rowPerPage" ng-class="$even?'table-danger':'table-info'">
<td>{{$index+1}}</td>
<td>{{x.Product}}</td>
<td>{{x.Location}}</td>
<td>{{x.Qty}}</td>
<td>{{x.UnitPrice | currency : '₹':2}}</td>
<td class="text-center">
<i class="fa fa-flag" aria-hidden="true" style="color:red" /> |
<i class="fa fa-bolt" aria-hidden="true" style="color:red" /> |
<i class="fa fa-users" aria-hidden="true"></i>
</td>
</tr>
and pager below it
<ul class="pagination">
<li class="page-item" ng-repeat="x in getNumber(rowPerPage) track by $index">
<a class="page-link" ng-click="pagerIndex=$index+1">{{$index+1}}</a>
</li>
</ul>
And AngularJs Code
$scope.ProductInfo_Pager = $scope.ProductInfo;
$scope.sortType = 'Product'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchText = ''; // set the default search/filter term ,
$scope.totalItems = $scope.ProductInfo.length;
$scope.currentPage = 1;
$scope.rowPerPage = 5;
$scope.pagerIndex = 1;
$scope.getNumber = function (num) {
var pages = $window.Math.ceil($scope.totalItems / num);
return new Array(pages);
}
$scope.paginate = function (rowindex) {
var begin, end, index, flag ;
index = $scope.pagerIndex;
end = (index * $scope.rowPerPage) - 1; // -1 to sync it with zero based index
begin = end - $scope.rowPerPage + 1;
if(rowindex >=begin && rowindex <= end ){
flag=true;
}
else{
flag=false;
}
var d = 0;
return flag;
};
paginate function() return true or false based on logic which is used in ng-show in tr tag with ng-repeat, but its not doing show , hide functionality as expected
Logic is :
Suppose rowPerPage is 5 - [5 row can be show up in table at a time]
And we click on 4 in pager so it should show row from 16-20 .
In ng-show paginate function is bind which take row index as parameter , this function check if rowindex falls in between 16 - 20 , if yes than it return true (ng-show=true) else false and accordingly should hide that row.
As per mu understanding its two way binding so any change in ng-show should work perfectly but it does not show any effect
Can someone help me why this is happening
I am a newbie in angularjs
Thanks.

Answer 1

Well ! ng-show is not working here and the function is not getting called at all written in ng-show !
If i correctly understand you want to create a pagination :
So i am giving you a very simple solution of pagination using a pagination filter .
you need to add this filter to your app :
app.filter('pagination', function() {
return function(input, start) {
start = +start; //parse to int
if (input != undefined && Object.keys(input).length > 0) {
return input.slice(start);
}
}
});
In your html :
<tr ng-repeat="x in ProductInfo_Pager | pagination: currentPage * rowPerPage | limitTo: rowPerPage|orderBy :sortType:sortReverse | filter:searchText" ng-class="$even?'table-danger':'table-info'">
<td>{{$index+1}}</td>
<td>{{x.Product}}</td>
<td>{{x.Location}}</td>
<td>{{x.Qty}}</td>
<td>{{x.UnitPrice | currency : '₹':2}}</td>
<td class="text-center">
<i class="fa fa-flag" aria-hidden="true" style="color:red" /> |
<i class="fa fa-bolt" aria-hidden="true" style="color:red" /> |
<i class="fa fa-users" aria-hidden="true"></i>
</td>
</tr>
In your pagination ul below your table :
<ul class="pagination">
<li class="page-item" ng-repeat="x in getNumber(rowPerPage) track by
$index">
<a class="page-link" ng-click="pagerIndex=$index+1">{{$index+1}}
</a>
</li>
</ul>
in your controller :
$scope.numberOfPages = function() {
if ($scope.ProductInfo_Pager != undefined) {
return Math.ceil($scope.ProductInfo_Pager.length /
$scope.rowPerPage);
}
};
Hope it work ! if any doubt please let me know .