javascript - 带分页的 Angular 搜索

标签 javascript angularjs

我正在尝试将搜索框与分页功能结合起来。

考虑以下图像列表标记:

<div class="panel panel-info" ng-repeat="image in galleryCtrl.images |
startFrom: galleryCtrl.currentPage * galleryCtrl.resultsPerPageNum |
limitTo: galleryCtrl.resultsPerPageNum  | filter: search | orderBy: sort">

和我的搜索框:

<div class="form-group" ng-hide="mySearch === 'false'">
    <label for="searchbox">Search: </label>
    <input type="text" id="searchbox" ng-model="search" 
    class="form-control" placeholder="What are we searching for?">
</div>

我的问题是,这样只会搜索当前页面中的图像。如果我搜索第二页上出现的图像而我在第一页上,则不会显示结果。我如何首先应用搜索过滤器然后“分页”?

编辑 现在的问题是,在搜索框中输入超过1个字母后,没有搜索结果。 对于我的分页,我使用以下过滤器:

app.filter('startFrom',function(){
        return function(input,start) {
            start = +start; //int parsing
            return input.slice(start);
        }
});

也许这就是问题所在?

最佳答案

您应该将filter: search移到过滤器列表的前面。这样,数据首先被过滤,然后分页,然后排序。

像这样:

<div class="panel panel-info" ng-repeat="image in galleryCtrl.images | filter: search | startFrom: galleryCtrl.currentPage * galleryCtrl.resultsPerPageNum | limitTo: galleryCtrl.resultsPerPageNum | orderBy: sort">

关于javascript - 带分页的 Angular 搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30776063/

相关文章:

javascript - 当存在子元素时,div 上的“onClick”事件不会发生

javascript - 如何使用 pixi.js 获取 PIXI.Graphics 实例的边界?

Javascript 或 Jquery 图像弹出窗口

javascript - 使用 ng Repeat 将 Angularjs $index 传递到 onchange 中,输入类型为 file

javascript - 向后台发送数据

javascript - 测试 Angular/Rails 应用程序的首选方法是什么?

javascript - AngularJs 格式化极小的十进制数 (1e-8)

javascript - 如何在 AngularJS 模式 Bootstrap 之外更新 $scope?

javascript - 简单的 JavaScript slider 无法正常运行

javascript - Ajax 无法在网站上运行