如何對使用UI Bootstrap Pagination分頁的AngularJS中的所有記錄進行排序和篩選

Question

我正在使用角度ui-bootstrap 分頁進行客戶端分頁以向列表添加分頁，然后我遇到一個問題，即排序和過濾過程僅對當前頁面中的數據進行排序和過濾。

以下是用於顯示數據的代碼片段：

<tr ng-repeat="reminderType in reminderTypes | filter: paginate | filter: searchText | orderBy:sortBy:sortDescending">
    <td>
        <a class="btn btn-sm btn-primary" ng-click="editReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
        <a class="btn btn-sm btn-info" ng-click="detailsReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-eye-open"></i> View</a>
    </td>
    <td>{{reminderType.Name}}</td>
    <td>{{reminderType.EmailTemplate}}</td>
</tr>
...
<uib-pagination class="pagination-sm"
                        total-items="totalItems" max-size="maxSize" items-per-page="numPerPage" num-pages="numPages"
                        ng-model="currentPage" boundary-links="true" rotate="false"></uib-pagination>

這里是控制器中的代碼片段來進行分頁：

$scope.maxSize = 3;
$scope.totalItems = 7;
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.numPerPage;
    end = begin + $scope.numPerPage;
    index = $scope.reminderTypes.indexOf(value);
    return (begin <= index && index < end);
};

我也在SO上查看此鏈接，但它不起作用。 如何使這項工作在頁面上排序和過濾數據？

我在plnkr中發布了完整的代碼

Answer 1

由於某種原因，我無法分叉你的plunkr，但這是一個修復。 JS：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
  $scope.reminderTypes = [{"ReminderTypeID":1,"Name":"STAMPING OF SPA","EmailTemplate":null},{"ReminderTypeID":2,"Name":"CONDITION PRECEDENT","EmailTemplate":null},{"ReminderTypeID":3,"Name":"STATE AUTHORITY CONSENT","EmailTemplate":null},{"ReminderTypeID":4,"Name":"PAYMENT OF BALANCE PURCHASE PRICE","EmailTemplate":null},{"ReminderTypeID":5,"Name":"CKHT FILING","EmailTemplate":null},{"ReminderTypeID":6,"Name":"TRANSFER FORM 14A","EmailTemplate":null},{"ReminderTypeID":7,"Name":"TRANSFER NOTICE OF ASSESSMENT","EmailTemplate":null}]
  $scope.sortBy = 'Name';
  $scope.sortDescending = false;

  $scope.filteredRT = angular.copy($scope.reminderTypes);

  $scope.searchText = '';

  $scope.maxSize = 3;
  $scope.totalItems = 7;
  $scope.currentPage = 1;
  $scope.numPerPage = 2;
  $scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.numPerPage;
    end = begin + $scope.numPerPage;
    index = $scope.filteredRT.indexOf(value);
    return (begin <= index && index < end);
  };

  $scope.filter = function(){
    var results = $scope.filteredRT;
    results.length = 0;
    var searchText = $scope.searchText;
    var reminderTypes = $scope.reminderTypes;

    for(var i = 0; i < reminderTypes.length; ++i){
      if(searchText.length > 0){
        if(reminderTypes[i].Name.includes(searchText)){
          results.push(reminderTypes[i]);
        }
      } else {
        results.push(reminderTypes[i]);
      }
    }
    $scope.totalItems = results.length;

  }
});

和HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PagerDemoCtrl">
  <div class="row">
    <div class="col-md-offset-9 col-md-3">
        <p>
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                <input type="text" class="form-control" placeholder="Enter Search Text"
                       ng-model="searchText" ng-change="filter()" />
            </div>
        </p>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <table class="table table-striped table-hover table-condensed">
            <thead>
                <tr class="bg-info">
                    <th></th>
                    <th>
                        <a ng-click="sortBy = 'Name'; sortDescending = !sortDescending">Reminder Type Name</a>
                        <span ng-show="sortBy == 'Name' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
                        <span ng-show="sortBy == 'Name' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
                    </th>
                    <th>
                        <a ng-click="sortBy = 'EmailTemplate'; sortDescending = !sortDescending">Email Template</a>
                        <span ng-show="sortBy == 'EmailTemplate' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
                        <span ng-show="sortBy == 'EmailTemplate' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="reminderType in filteredRT | filter: paginate | orderBy:sortBy:sortDescending">
                    <td>
                        <a class="btn btn-sm btn-primary" ng-click="editReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
                        <a class="btn btn-sm btn-info" ng-click="detailsReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-eye-open"></i> View</a>
                    </td>
                    <td>{{reminderType.Name}}</td>
                    <td>{{reminderType.EmailTemplate}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" class="text-right">
                        Showing page {{currentPage}} of {{numPages}}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-md-12 text-center">
        <uib-pagination class="pagination-sm"
                        total-items="totalItems" max-size="maxSize" items-per-page="numPerPage" num-pages="numPages"
                        ng-model="currentPage" boundary-links="true" rotate="false"></uib-pagination>
    </div>
</div>
</div>
  </body>
</html>

特別是，我在輸入過濾器中添加了一個ngChange指令，現在使用了一個reminderTypes的副本。 不幸的是，我認為你想要做的事情有點過於復雜，無法單獨使用角度濾波器。 我沒有測試順序，但分頁似乎以這種方式正常工作。

編輯：juste添加響應問題的正確分叉： https ：//plnkr.co/edit/HMw8U4OUsW5DNDGfQKHY？p = preview

如何對使用UI Bootstrap Pagination分頁的AngularJS中的所有記錄進行排序和篩選

問題描述

1 個解決方案

解決方案1
0 已采納 2016-05-23 05:36:33

如何對使用UI Bootstrap Pagination分頁的AngularJS中的所有記錄進行排序和篩選

問題描述

1 個解決方案

解決方案1 0 已采納 2016-05-23 05:36:33

解決方案1
0 已采納 2016-05-23 05:36:33