AngularJs分页中的搜索框过滤器

Question

我创建了一个相册和一个uib分页，现在我想添加一个搜索框。 我的分页包括5页。 我使用的筛选器仅搜索当前页面中的照片。例如，如果我转到第10页并要搜索第1页中的图片不起作用，但它会搜索并显示在第10页中。我想知道应该使用哪个过滤器来搜索所有页面的图片。

js代码：

paintApp.controller('intController', ['$scope','$location','$log', function($scope,$location, $log){

    this.images = [];

    for(i = 1 ; i <51 ; i++){
        this.images.push(i);    
    }

    this.currentPage = 1 ; 
    this.numPerPage = 9 ; 
    this.maxSize = 6;

    this.pageChanged = function() {
        $location.path( "int/"+this.currentPage , false);

    };
}]);

    paintApp.filter('imgThumb', function(){
        return function(images, start){
            return images.slice(start);
        }
    });

HTML代码：

<div  ng-controller="intController as intCtrl ">   
    <div class="container">
        <uib-pagination 
          ng-model="intCtrl.currentPage"
          total-items="intCtrl.images.length"
          max-size="intCtrl.maxSize"  
          ng-click="intCtrl.pageChanged()"
          >

        </uib-pagination>

        <div class="row">
              <div class="col-lg-3">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search for..." name="mySearch" ng-model="search"  >
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button" >Go!</button>

                </div><!-- /input-group -->
              </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
        <br>
        <br>
        <div class="row">
        </div>
        <div class="col-md-4 uib-pagination"  ng-repeat="img in intCtrl.images | imgThumb:(intCtrl.currentPage -1 )* intCtrl.numPerPage| limitTo:intCtrl.numPerPage | filter: search ">



            <div class="thumbnail ">
                <img  src="src/images/sample{{img}}.jpg" >  
            <div class = "caption"  >
                <h3>{{img}} </h3>
                 <p>
                     <a href = "#" class = "btn btn-primary" role = "button">
                       Button
                     </a> 
                     <a href = "#" class = "btn btn-default" role = "button">
                       Button
                     </a>
                 </p>
            </div>
            </div>              
        </div>
    </div>
</div>

Answer 1

现在，您首先要应用limitTo过滤器，这将产生一个包含9个元素的数组，然后将filter器filter器应用于该数组。

您想要的是首先应用filter器filter器，然后应用limitTo ，因此更改filter器的顺序：

... | filter: search | limitTo:intCtrl.numPerPage

演示： http ： //plnkr.co/edit/wBxVaVCXtgOeBEY3Kh9G？p = preview