Question

我正在使用angular-ui引导程序对表进行分页，并且我有单独的搜索输入标记，搜索输入只搜索分页列表中的第一组数据，它不搜索表的后续分页页，如何从输入中搜索所有数据。

HTML

<div ng-controller="IndexCtrl" > 
        <input class="form-control formcustom" id="exampleInputEmail2" ng-model="custquery" placeholder="Search for Tripsheets" autofocus>
     <table class="table table-striped table-bordered table-condensed table-hover"> 

     <tr ng-repeat="customer in customers | orderBy:'id':true | filter: paginate | filter: custquery"> 
     <td>{{customer.id}}</td> 
     <td> 
     <span>{{customer.name}}</span> 
     </td>
     <td>
     <span>{{customer.address}}</span> 
     </td>
     <td>
     <span>{{customer.phone1}}</span> 
     </td> 
     <td>
     <span >{{customer.phone2}}</span> 
     </td> 
     <td>
     <span >{{customer.phone3}}</span> 
     </td> 
     <td>
     <span>{{customer.phone4}}</span> 
     </td> 
     <td>
     <span >{{customer.email}}</span> 
     </td> 
     </tr> 
     </table>
     <pagination total-items="totalItems" ng-model="currentPage"
              max-size="5" boundary-links="true"
              items-per-page="numPerPage" class="pagination-sm">
            </pagination> 
</div>

JS

app.controller('IndexCtrl', function ($scope, customerFactory, tripsheetFactory, driverFactory, notificationFactory) { 
 $scope.customers = [];
 $scope.addMode = false;
 customerFactory.getCustomers().then(function(data){
    $scope.customers = data.data;
    $scope.totalItems = $scope.customers.length;
    $scope.currentPage = 1;
    $scope.numPerPage = 20;
      $scope.paginate = function(value) 
      {
        var begin, end, index;
        begin = ($scope.currentPage - 1) * $scope.numPerPage;
        end = begin + $scope.numPerPage;
        index = $scope.customers.indexOf(value);
        return (begin <= index && index < end);
      };

 });

}）;

customerFactory是我为获取json数据而创建的工厂

Answer 1

$scope.customers中客户的位置不会改变，因此分页功能将始终过滤除完整客户数组的第一页以外的所有页面。您需要的是一个中间结果（另一个数组），它保存通过$scope.custquery过滤器的客户。 paginate函数需要对第二个过滤后的数组进行操作。

我无法看到以声明方式执行此操作的方法，因此我将filterFilter注入控制器并在$scope.custquery上添加了一个监视来执行它。

我整理了显示结果的plunk。

使用angular bootstrap ui搜索angularjs无法正常工作

1 个答案: