Question

我有这个角度应用程序，我根据记录显示一个表，带有过滤器，但问题是当我在过滤器中输入一个值时，记录得到过滤器但是在删除过滤器值后，它没有得到更新，而且当我们点击下一个数字继续减少时，分页保持不变，我是angularjs的新手，任何帮助都将非常感激。

这是我的HTML代码：

<input type="search" placeholder="Search By Any..." ng-model="search.$" />
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 filteredRecords 
        | 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-left">
            <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>

这是角度代码：

angular.module("contentViewStatusApp")
.controller("contentViewStatusController", function($scope,
 $filter,contentViewStatusService)
{
var 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.filteredRecords = [];
$scope.items = [];

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

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

    if($scope.pageCount() > rangeSize)
        for (var i = start; i < start + rangeSize; i++)
        {
            ret.push(i);
        }
    else
        for (var i = start; i < $scope.pageCount()+1; i++)
        {
            ret.push(i);
        }
    return ret;
};

var filterBy = $filter('filter');
$scope.$watch('search', function(newValue)
{
    $scope.filteredRecords = filterBy(records, newValue);
}, true);


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

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

$scope.pageCount = function()
{
    return Math.ceil($scope.filteredRecords.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;
};
});

Answer 1

@Mckenzie，您的方案已经可以使用插件，您可以从中获取更多信息。

查看此插件：ng-table（https://github.com/esvit/ng-table）

请参阅此示例，它可以完成您所需的所有工作。

ng-table combining sorting and filtering

角度结果和分页不会在过滤器上更新

1 个答案: