Question

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

js code：

<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>

HTML code：

{{1}}

Answer 1

现在您首先应用limitTo过滤器，它将生成九个元素的数组，然后将filter过滤器应用于该数组。

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

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

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

使用AngularJs在分页中搜索框过滤器

1 个答案: