角度搜索过滤器不会在整个表中进行搜索

时间:2014-10-04 08:48:24

标签: javascript angularjs angularjs-ng-repeat angular-ui-bootstrap

问题是搜索过滤器只查找当前页面的记录,我希望它从整个表中查找记录。我怎么能这样做?

<input type="text" placeholder="Search By Any..." ng-model="search.$"/>
<table dir="ltr" width="477" border="1" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('name')">User</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('contentType')">Content Type</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('contentName')">Content Name</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('startTime')">Start Time</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('endTime')">End Time</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('duration')">Duration(In Secs)</a></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="record in filteredRecords | filter: search | 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>
</table>
<pagination class="pull-right" style="cursor: pointer;" num-pages="numPages()" current-page="currentPage" on-select-page="pageChanged(page)"></pagination>

角度代码:

angular.module("contentViewStatusApp")
       .controller("contentViewStatusController", function($scope, contentViewStatusService){
    $scope.records = contentViewStatusService.list();
    $scope.currentPage = 1
    $scope.numPerPage = 10
    $scope.maxSize = 5;
    $scope.numPages = function(){
        return Math.ceil($scope.records.length / $scope.numPerPage);
    };
    $scope.changeSort = function(value){
        if ($scope.sort == value){
            $scope.reverse = !$scope.reverse;
            return;
        }
        $scope.sort = value;
        $scope.reverse = false;
    }
    $scope.$watch('currentPage + numPerPage', function(){
        var begin = (($scope.currentPage - 1) * $scope.numPerPage), end = begin + $scope.numPerPage;
        $scope.filteredRecords = $scope.records.slice(begin, end);
    });
});

2 个答案:

答案 0 :(得分:4)

您可以使用过滤器进行分页,而不是创建另一个数组。这样它就会在被过滤之前搜索整个数组。

This page显示了使用过滤器进行分页的示例。

然后你可以先获得搜索查询,它应该搜索整个数组。

<强>更新

Here's其中一个基于搜索文本更新的分页。

它会在过滤后观察搜索文本并更新页面范围:

$scope.$watch('searchText.name', function (v) {
    $scope.currentPage = 0;
    $scope.pages = $scope.range();
});

然后根据过滤结果更新pageCount

$scope.pageCount = function () {
    var pages = $filter('filter')($scope.items, $scope.searchText);
    return Math.ceil(pages.length / $scope.itemsPerPage);
};

答案 1 :(得分:3)

是的,我同意@agreco,但我认为您必须以这样的方式定义过滤记录,以便它始终与您的search.$ model一起使用。为此,请查看this fiddle

希望这能解决您的问题。祝你好运。