Question

Html代码：这是html代码，基本上显示了一个带有搜索过滤器的表。。。

<input type="search" ng-model="search.$" />
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th><a href="#" ng-click="changeSort('name')">User</a></th>
            <th><a href="#" ng-click="changeSort('contentType')">Content Type</a></th>
            <th><a href="#" ng-click="changeSort('contentName')">Content Name</a></th>
            <th><a href="#" ng-click="changeSort('startTime')">Start Time</a></th>
            <th><a href="#" ng-click="changeSort('endTime')">End Time</a></th>
            <th><a href="#" ng-click="changeSort('duration')">Duration(In Secs)</a></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="record in records 
            | filter: search 
            | offset: currentPage*itemsPerPage 
            | limitTo: itemsPerPage 
            | orderBy:sort:reverse track by $index">
            <td>{{record.user}}</td>
            <td>{{record.contentType}}</td>
            <td>{{record.contentName}}</td>
            <td>{{record.startTime}}</td>
            <td>{{record.endTime}}</td>
            <td>{{record.duration}}</td>
        </tr>
    </tbody>
    <tfoot>
        <td colspan="6">
            <div class="pagination pull-right">
                <ul>
                    <li ng-class="prevPageDisabled()"><a href
                        ng-click="prevPage()">« Prev</a></li>
                    <li ng-repeat="n in range()"
                        ng-class="{active: n == currentPage}" ng-click="setPage(n)">
                        <a href="#">{{n+1}}</a>
                    </li>
                    <li ng-class="nextPageDisabled()"><a href
                        ng-click="nextPage()">Next »</a></li>
                </ul>
            </div>
        </td>
    </tfoot>
</table>

Angular Js代码：这是使用whtch搜索，排序和分页的角度代码。。

angular.module("contentViewStatusApp").controller("contentViewStatusController", function($scope, contentViewStatusService)
{
    $scope.records = contentViewStatusService.list();

    $scope.changeSort = function(value)
    {
        if ($scope.sort == value)
        {
            $scope.reverse = !$scope.reverse;
            return;
        }
        $scope.sort = value;
        $scope.reverse = false;
    }

    $scope.itemsPerPage = 8;
    $scope.currentPage = 0;
    $scope.items = [];

    $scope.range = function()
    {
        var rangeSize = 5;
        var ret = [];
        var start;

        start = $scope.currentPage;
        if (start > $scope.pageCount() - rangeSize)
        {
            start = $scope.pageCount() - rangeSize + 1;
        }

        for (var i = start; i < start + rangeSize; i++)
        {
            ret.push(i);
        }
        return ret;
    };

    $scope.prevPage = function()
    {
        if ($scope.currentPage > 0)
        {
            $scope.currentPage--;
        }
    };

    $scope.prevPageDisabled = function()
    {
        return $scope.currentPage === 0 ? "disabled" : "";
    };

    $scope.pageCount = function()
    {
        return Math.ceil($scope.records.length / $scope.itemsPerPage) - 1;
    };

    $scope.nextPage = function()
    {
        if ($scope.currentPage < $scope.pageCount())
        {
            $scope.currentPage++;
        }
    };

    $scope.nextPageDisabled = function()
    {
        return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
    };

    $scope.setPage = function(n)
    {
        $scope.currentPage = n;
    };
});
angular.module("contentViewStatusApp").filter('offset', function()
{
    return function(input, start)
    {
        start = parseInt(start, 10);
        return input.slice(start);
    };
});

我在这里遇到的唯一问题是，在搜索记录数量减少后，分页不会更新，任何帮助都非常感谢，提前感谢。。

Answer 1

记录数组中的项目数永远不会更改，因为过滤器返回一个新数组，而不是源数组的更新版本。因此，pageCount也不会改变;为了解决这个问题，有两种可能的解决方案：

解决此问题的最简单方法可能是以编程方式过滤您控制器中的数据。假设您将$ filter服务传递给控制器，您可以编写一个函数：

$ scope.getFilteredRecords = function（）{ var filterBy = $ filter（＆＃39; filter＆＃39;）; return filterBy（$ scope.records，$ scope.search）; }

然后在查看器和pageCount（）中使用getFilteredRecords（）而不是记录;这是最简单的方法，但会做多个冗余过滤器;如果您有大量数据，这可能是性能问题

实现类似结果的更有效方法是使用$ watch服务，该服务会在给定变量更改值时进行检查。因此，您可以在$ scope.search中查看任何更改，填充已过滤的辅助变量并使用它而不是记录：在控制器的某个地方（但不在函数内），注册你的$ watch：

var filterBy = $ filter（＆＃39; filter＆＃39;）; $ scope。$ watch（＆＃39; search＆＃39;，function（newValue）{ $ scope.filtered = filterBy（$ scope.records，newValue）; }，true）;

更新您的观点：

<tr ng-repeat="record in filtered
            | offset: currentPage*itemsPerPage 
            | limitTo: itemsPerPage 
            | orderBy:sort:reverse track by $index">

（你不再需要过滤器，因为$ watch会照顾它）

更新pageCount：

$scope.pageCount = function()
    {
        return Math.ceil($scope.filtered.length / $scope.itemsPerPage) - 1;
    };

分页确实不会在搜索上更新

1 个答案: