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

angular result and pagination doesnt get updated on filter

本文关键字:过滤器 更新 结果 分页      更新时间:2023-09-26

我有一个angular应用程序,我在其中显示一个基于记录的表,带有过滤器,但问题是当我在过滤器中插入一个值时,记录会被过滤器过滤,但删除过滤器值后,它不会更新,而且当我们点击下一个数字时,分页会保持不变。不断减少,我是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;
};
});

@Mckenzie,对于您的场景,插件已经可用,您可以从中获得更多。

看看这个插件:ng表(https://github.com/esvit/ng-table)

看看这个例子,它可以完成你需要的所有工作。

组合排序和过滤的ng表