Question

以下是我的表格标记

<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 : '&#x20B9;':2}}</td>
                    <td class="text-center">
                        <i class="fa fa-flag" aria-hidden="true" style="color:red" />&nbsp;&nbsp;|&nbsp;&nbsp;
                        <i class="fa fa-bolt" aria-hidden="true" style="color:red" />&nbsp;&nbsp;|&nbsp;&nbsp;
                        <i class="fa fa-users" aria-hidden="true"></i>
                    </td>
                </tr>

和它下面的寻呼机

<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>

和AngularJs代码

    $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（）根据ng-show在带有ng-repeat的tr标签中使用的逻辑返回true或false，但是它没有显示，隐藏了预期的功能

逻辑是：假设rowPerPage为5 - [每行可以在表格中显示5行]

然后我们点击寻呼机中的4，所以它应显示16-20的行。

在ng-show中，paginate函数是绑定，它将行索引作为参数，此函数检查rowindex是否介于16 - 20之间，如果是，则返回true（ng-show=true），否则为false，因此应该隐藏行。

根据mu了解它的双向绑定，因此ng-show中的任何更改都应该完美地工作，但它没有显示任何效果有人可以帮助我为什么会发生这种情况

我是angularjs的新手

感谢。

Answer 1

好吧！ ng-show在这里没有工作，并且在ng-show中写的函数没有被调用！

如果我正确理解你想创建一个分页：

所以我使用分页过滤器给你一个非常简单的分页解决方案。

您需要将此过滤器添加到您的应用中：

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

}

}）;

在你的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 : '&#x20B9;':2}}</td>
                <td class="text-center">
                    <i class="fa fa-flag" aria-hidden="true" style="color:red" />&nbsp;&nbsp;|&nbsp;&nbsp;
                    <i class="fa fa-bolt" aria-hidden="true" style="color:red" />&nbsp;&nbsp;|&nbsp;&nbsp;
                    <i class="fa fa-users" aria-hidden="true"></i>
                </td>
            </tr>

在你桌子下方的分页中：

<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>

在您的控制器中：

$scope.numberOfPages = function() {
            if ($scope.ProductInfo_Pager != undefined) {
                return Math.ceil($scope.ProductInfo_Pager.length / 
                  $scope.rowPerPage);
            }

        };

希望它有效！如果有任何疑问请告诉我。

ng-show不适用于ng-repeat

1 个答案: