如何使用 ngFilter 过滤和搜索表？

Question

我看过很多关于表格搜索的示例和教程，并尝试过。问题是它只搜索在当前页面中看到的表格结果。我的意思是，我使用了分页，并且搜索文件管理器仅在用户可见的页面中工作。它不会在其他分页页面中得到结果。

我已经实现了一个简单的搜索，几乎在每个示例中都有解释。为什么我的方法会这样？非常感谢您的帮助。

这是我的 table.html

<div class="row">
   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
       <div class="input-group input-icon">
           <input id="empid" ng-model="Search.empid" type="text" class="form-control" name="empid" placeholder="Search with ID">
           <span class="input-group-addon">
               <i class="fa fa-search s14"></i>
           </span>
       </div>
   </div>
   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
       <div class="input-group input-icon">
           <input id="ename" ng-model="Search.fname" type="text" class="form-control" name="ename" placeholder="Search with Name">
           <span class="input-group-addon">
               <i class="fa fa-search s14"></i>
           </span>
       </div>
   </div>
</div>
<div class="row">                                   
   <div class="col-md-6 col-xs-12">
    View <label>
           <span>
            <select class="form-control input-sm" ng-model="viewBy" ng-options="x for x in nums" ng-change="setEmployeesPerPage(viewBy)"></select>                                                            
            </span>
       </label> records at a time.
   </div>                             
<table id="basic-datatables" class="table table-bordered table-hover" cellspacing="0" width="100">
   <thead style="text-align:match-parent">
       <tr>
           <th rowspan="1" colspan="1" style="width:100px">
               <a href="javascript:void(0)" class="table-links" ng-click="sortType='empid'; sortReverse=!sortReverse">
                   <span ng-show="sortType != 'empid'" class="fa fa-unsorted"></span>
                   <span ng-show="sortType == 'empid' && !sortReverse" class="fa fa-sort-asc"></span>
                   <span ng-show="sortType == 'empid' && sortReverse" class="fa fa-sort-desc"></span>
                ID</a>
           </th>
           <th rowspan="1" colspan="1" style="width:200px">
               <a href="javascript:void(0)" class="table-links" ng-click="sortType='fname'; sortReverse=!sortReverse">
                   <span ng-show="sortType != 'fname'" class="fa fa-unsorted"></span>
                   <span ng-show="sortType == 'fname' && !sortReverse" class="fa fa-sort-asc"></span>
                   <span ng-show="sortType == 'fname' && sortReverse" class="fa fa-sort-desc"></span>
               First Name</a>
           </th>
           <th rowspan="1" colspan="1" style="width:200px">
               <a href="javascript:void(0)" class="table-links" ng-click="sortType='lname'; sortReverse=!sortReverse">
                   <span ng-show="sortType != 'lname'" class="fa fa-unsorted"></span>
                   <span ng-show="sortType == 'lname'&& !sortReverse" class="fa fa-sort-asc"></span>
                   <span ng-show="sortType == 'lname'&& sortReverse" class="fa fa-sort-desc"></span>
               Last Name</a>
           </th>
           <th rowspan="1" colspan="1" style="width:200px">Email</th>
           <th rowspan="1" colspan="1" style="width:100px">Mobile</th>
           <th rowspan="1" colspan="1" style="width:200px">Designation</th>
           <th rowspan="1" colspan="1" style="width:200px">Dept. Name</th>
       </tr>
   </thead>
   <tbody>
       <tr ng-click="selectRow(emp)" ng-repeat="emp in employeeDetails.slice(((currentPage-1)*itemsPerPage),((currentPage)*itemsPerPage)) | filter:Search | orderBy:sortType:sortReverse" style="text-align:match-parent">
           <td>{{emp.empid}}</td>
           <td>{{emp.fname}}</td>
           <td>{{emp.lname}}</td>
           <td>{{emp.email}}</td>
           <td>{{emp.mobile_no}}</td>
           <td>{{emp.designation}}</td>
           <td>{{emp.department_name}}</td>
       </tr>
   </tbody>
</table> 
<div class="row">
   <div class="col-md-8 col-xs-12">
       <uib-pagination total-items="totalEmployees" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"></uib-pagination>
   </div>
</div>

这是我的 controller.js

这就是我获取 JSON 的方式。

(function initController() {

    EmployeeService.GetEmpDetails(function (res) {
        $scope.employeeDetails = JSON.parse(res.data);
    });
})();

我怎样才能正确实施它。谢谢

Answer 1

ng-repeat="emp in employeeDetails 
    | filter:Search 
    | limitTo: itemsPerPage : (currentPage-1)*itemsPerPage 
    | orderBy:sortType:sortReverse"

试试这个。先过滤然后限制。