过滤器没有按预期显示

我做了一个表格来显示数组中的值，我添加了一个过滤器。该表格分页最多每页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

过滤器没有按预期显示

回答

相关问题