Question

我创建了一个显示数组值的表，我添加了一个过滤器。该表分页，每页最多5个记录。

应用过滤器时出现问题。例如，如果您搜索术语＆＃34; ora＆＃34;将有三条记录，每页一条。

这些结果如何一起显示（在一个页面上，或者它需要多少页面，但没有消散），当我删除过滤器以显示它时（在所有页面中）？

现场代码可在此处找到：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';
        }
    };
}]);

Answer 1

我从this JSFiddle上列出的Angular JSFiddle Examples page of the wiki进行了调整。我无法弄清楚你的分页，所以我只是把按钮放在那里，但你应该能够推断并将其应用到你的分页功能。通过应用简单地从数组中删除未在当前页面上显示的元素并使用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>

Answer 2

我已对您的实时版本进行了一些更改，以实现您的目标。检查以下链接： //plnkr.co/edit/TZ1woevPK8uLlbERBtlR?p=preview

您的版本不起作用的原因是过滤器仅执行过滤作业以确定模型是否满足条件但不更改模型。如果模型没有发生任何变化，那么就不会对分页或表格列表进行任何更改。

所以我所做的只是创建原始模型的副本版本并添加观察者。如果我已经附上了plnkr链接，你可以找到更多信息。

Answer 3

我通过简单的条件从第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;
    }
}

过滤器没有像我预期的那样显示

3 个答案: