過濾器沒有按預期顯示

我做了一個表格來顯示數組中的值，我添加了一個過濾器。該表格分頁最多每頁5條記錄。過濾器沒有按預期顯示

當我應用過濾器時會出現問題。例如，如果您搜索術語「ora」，將會有三個記錄，每個頁面上一個記錄。

這些結果如何一起顯示（在一頁上，或它需要多少頁，但沒有消散），以及當我刪除過濾器以顯示它正常（在所有頁面中）？

活代碼可以在這裏找到：https://plnkr.co/edit/QIcmQUqABDJcV3H6vqRo?p=preview

HTML：

<body ng-app="salariesApp" ng-controller="mainCtrl"> 
    <table class="table"> 
     <thead> 
      <tr> 
       <th ng-click="sortBy(id)">Nr. crt.</th> 
       <th ng-click="sortBy(an)">Anul</th> 
       <th ng-click="sortBy('den')">Denumirea institutiei/companiei</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="tableSearch"></td> 
       <td class="tableSearch"><input class="form-control" type="text" id="inputYear" ng-model="searchSal.an" ng-value={{crrYear}} /></td> 
       <td class="tableSearch"><input class="form-control" type="text" id="inputName" ng-model="searchSal.den" /></td> 
      </tr> 
      <tr ng-repeat="rows in showSal | filter: searchSal | orderBy: sortProperty: !reverse | filter : paginate track by $index"> 
       <td class="spa-col-md-1">{{rows.id}}</td> 
       <td class="spa-col-md-2">{{rows.an}}</td> 
       <td class="col-md-5">{{rows.den}}</td> 
      </tr> 
     </tbody> 
    </table> 

    <pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" 
     items-per-page="numPerPage" class="pagination-sm"> 
    </pagination> 
</body>

JS：

var app = angular.module("salariesApp", ['ui.bootstrap']); 

app.constant("appConst", { 
    pagesLimit:    5, 
    crrYear:     2016 
}); 

app.controller('mainCtrl', ['$scope', 'appConst', function($scope, appConst) { 
    $scope.crrYear = appConst.crrYear; 

    $scope.pageNum = { 
     linkBtnClass: 'linkBtnClass cursor-pointer' 
    }; 

    $scope.showSal = [ 
     { id: '1', an: '2016', den: 'Oracle Romania' }, 
     { id: '2', an: '2016', den: 'Microsoft' }, 
     { id: '3', an: '2016', den: 'Computer Generated Solutions - CGS Europe' }, 
     { id: '4', an: '2016', den: 'IBM' }, 
     { id: '5', an: '2016', den: 'Luxoft' }, 
     { id: '6', an: '2016', den: 'Oracle Romania' }, 
     { id: '7', an: '2016', den: 'Luxoft' }, 
     { id: '8', an: '2016', den: 'Computer Generated Solutions - CGS Europe' }, 
     { id: '9', an: '2016', den: 'IBM' }, 
     { id: '10', an: '2016', den: 'Luxoft' }, 
     { id: '11', an: '2016', den: 'Oracle Romania' }, 
     { id: '12', an: '2016', den: 'Microsoft' }, 
     { id: '13', an: '2016', den: 'IBM' }, 
     { id: '14', an: '2016', den: 'Luxoft' } 
    ]; 

    $scope.searchSal = ''; 

    $scope.sortProperty = $scope.showSal.id; 
    $scope.reverse = true; 
    $scope.sortBy = function (sortProperty) { 
     $scope.reverse = ($scope.sortProperty === sortProperty) ? !$scope.reverse : false; 
     $scope.sortProperty = sortProperty; 
    }; 



    // PAGINATION: 
    $scope.totalItems = $scope.showSal.length; 
    $scope.currentPage = 1; 
    $scope.numPerPage = 5; 

    $scope.paginate = function(value) { 
     var begin, end, index; 
     begin = ($scope.currentPage - 1) * $scope.numPerPage; 
     end = begin + $scope.numPerPage; 
     index = $scope.showSal.indexOf(value); 
     return (begin <= index && index < end); 
    }; 


    $scope.getOptionsClass = function (index) { 
     if (index > 0) { 
      return 'thumbnail nav-option-r'; 
     } else { 
      return 'thumbnail nav-option-l'; 
     } 
    }; 
}]);

來源

2016-08-01 Doro

你的調度器壞了。 – Lex

我已經對您的實時版本進行了一些更改以實現您的目標。查看以下鏈接： //plnkr.co/edit/TZ1woevPK8uLlbERBtlR?p=preview

之所以你的版本不工作是過濾器只能做過濾工作，以決定是否模型的滿足的條件，但不是改變模型。如果模型沒有發生變化，那麼分頁或表格列表就不會有任何變化。

所以我所做的只是創建原始模型的複製版本並添加監視器。你可以找到更多的信息，如果plnkr鏈接我已經附上。

來源

2016-08-02 10:25:22 Jin

謝謝，這就是我想要的要做:)但是我還有另一個問題，我怎樣才能對所有數據進行排序，而不僅僅是來自單個頁面的數據？就像@Lex一樣：當它點擊「nr crt」時，將排序所有的表格，不僅僅是頁面，在我的情況下它是如何的...... – Doro

仍然和我提到的類似。您需要更改模型。這是我製作的現場版本，你可以自己檢查一下。 [鏈接]（http://plnkr.co/edit/4ccycImFtIQjI53RhKIu?p=preview） – Jin

我適應這個從其中的Angular JSFiddle Examples page of the wiki上市this JSFiddle。我無法弄清楚你的分頁，所以我只是把按鈕放在那裏，但你應該能夠推斷和應用到你的分頁功能。通過應用簡單地刪除陣列中當前頁面上未顯示的元素的過濾器，並使用limitTo分頁變得非常簡單，並且不會顯示出您看到每個項目將顯示在其自己的頁面上的行爲。

var app = angular.module("salariesApp", ['ui.bootstrap']); 
 

 
app.constant("appConst", { 
 
    pagesLimit: 5, 
 
    crrYear: 2016 
 
}); 
 

 
app.filter('startFrom', function() { 
 
    return function(input, start) { 
 
     start = +start; //parse to int 
 
     return input.slice(start); 
 
    } 
 
}); 
 

 
app.controller('mainCtrl', ['$scope', '$filter', 'appConst', 
 
     function($scope, $filter, appConst) { 
 
     $scope.crrYear = appConst.crrYear; 
 

 
     $scope.pageNum = { 
 
      linkBtnClass: 'linkBtnClass cursor-pointer' 
 
     }; 
 

 
     $scope.showSal = [{ id: '1', an: '2016', den: 'Oracle Romania' }, 
 
          { id: '2', an: '2016', den: 'Microsoft' }, 
 
          { id: '3', an: '2016', den: 'Computer Generated Solutions - CGS Europe' }, 
 
          { id: '4', an: '2016', den: 'IBM' }, 
 
          { id: '5', an: '2016', den: 'Luxoft' }, 
 
          { id: '6', an: '2016', den: 'Oracle Romania' }, 
 
          { id: '7', an: '2016', den: 'Luxoft' }, 
 
          { id: '8', an: '2016', den: 'Computer Generated Solutions - CGS Europe' }, 
 
          { id: '9', an: '2016', den: 'IBM' }, 
 
          { id: '10', an: '2016', den: 'Luxoft' }, 
 
          { id: '11', an: '2016', den: 'Oracle Romania' }, 
 
          { id: '12', an: '2016', den: 'Microsoft' }, 
 
          { id: '13', an: '2016', den: 'IBM' }, 
 
          { id: '14', an: '2016', den: 'Luxoft' }]; 
 

 
     $scope.searchSal = {}; 
 

 
     $scope.sortProperty = $scope.showSal.id; 
 
     $scope.reverse = true; 
 
     $scope.sortBy = function(sortProperty) { 
 
      $scope.reverse = ($scope.sortProperty === sortProperty) ? !$scope.reverse : false; 
 
      $scope.sortProperty = sortProperty; 
 
     }; 
 

 
     // PAGINATION: 
 
     $scope.totalItems = ($filter('filter')($scope.showSal, $scope.searchSal)).length; 
 
     $scope.currentPage = 0; 
 
     $scope.numPerPage = 5; 
 
     
 
     $scope.totalPages = function() { 
 
      return Math.ceil(($filter('filter')($scope.showSal, $scope.searchSal)).length/$scope.numPerPage); 
 
     }; 
 
     }]);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script> 
 

 
<div ng-controller="mainCtrl" ng-app="salariesApp"> 
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th ng-click="sortBy(id)">Nr. crt.</th> 
 
     <th ng-click="sortBy(an)">Anul</th> 
 
     <th ng-click="sortBy('den')">Denumirea institutiei/companiei</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="tableSearch"></td> 
 
     <td class="tableSearch"> 
 
      <input type="text" ng-value="{{crrYear}}" ng-model="searchSal.an" id="inputYear" class="form-control" /> 
 
     </td> 
 
     <td class="tableSearch"> 
 
      <input type="text" ng-model="searchSal.den" id="inputName" class="form-control" /> 
 
     </td> 
 
     </tr> 
 
     <tr ng-repeat="rows in showSal | filter: searchSal | orderBy: sortProperty: !reverse | startFrom:currentPage * numPerPage | limitTo: numPerPage track by $index"> 
 
     <td class="spa-col-md-1">{{rows.id}}</td> 
 
     <td class="spa-col-md-2">{{rows.an}}</td> 
 
     <td class="col-md-5">{{rows.den}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <button ng-click="currentPage = currentPage - 1" ng-disabled="currentPage === 0">Prev</button> Page {{currentPage + 1}} of {{totalPages()}} <button ng-click="currentPage = currentPage + 1" ng-disabled="currentPage === totalPages() -1">Next</button> 
 
</div>

來源

2016-08-01 15:37:11 Lex

它的工作原理，但在減去一小部分...如果嘗試從第2-3頁搜索術語「ora」，它將不會顯示任何內容，直到您將手動向前（單擊）轉到第1頁然後它會更改（這是正常的）總頁數爲1.現在我試圖使它改變當前頁面，如果它更像總頁面......但我無法管理視圖... – Doro

我解決了這個問題用一個簡單的條件，從第2頁搜索：

app.filter('startFrom', function() { 
     return function (input, start, crrPage, totalPages) { 
       if (crrPage+1 <= totalPages) { 
        start = +start; //parse to int 
       } else { 
        crrPage = 0; 
        start = +crrPage; //parse to int 
       } 
       return input.slice(start); 
     } 
});

有了這個條件我讓到當前頁面切換到真正的當前頁面在搜索時：

$scope.showCrrPage = function (crrPage) { 
    if ((crrPage+1) <= $scope.totalPages()) { 
     return $scope.currentPage + 1; 
    } else { 
     return 1; 
    } 
}

來源

2016-08-02 09:47:09 Doro

過濾器沒有按預期顯示

回答

相關問題