2014-06-25 104 views
0

我使用angular-ui bootstrap爲表分頁,我有單獨的搜索輸入標記,搜索輸入只搜索分頁列表中的第一個設置數據,它不搜索表格的後續分頁頁面,我如何從輸入中搜索所有數據。在angularjs中搜索與角引導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數據

+0

發佈您的代客查詢 – sylwester

回答

0

在$ scope.customers客戶的位置不會改變,因此PAGINATE函數總是過濾掉所有,但顧客盈門陣列的第一頁。您需要的是一箇中間結果(另一個數組),用於存放通過$ scope.custquery過濾器的客戶。分頁函數需要在第二個過濾數組上運行。

我看不到一種聲明方式,所以我將filterFilter注入控制器,並在$ scope.custquery中添加了一個監視器來執行它。

我放在一起顯示結果的plunk

相關問題