javascript - Angular 分页不对所有页面进行排序和过滤

我正在使用angular 1.5.5和angular-bootstrap 1.3.3通过ng-repeat对表上的数据进行分页，排序和过滤，但它仅在当前页面而不是在所有页面上进行排序和过滤。

app.js

var app = angular.module("sac.app", ['ngResource', 'ui.router', 'ui.bootstrap']);
app.config(function config($stateProvider, $urlRouterProvider) {
    'use strict';
    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'views/home.html'
        })
        .state('patients', {
            url: '/patients',
            controller: 'PatientController',
            templateUrl: 'views/patients.html'
        });

app.controller('PatientController', ['$scope', 'patients', function ($scope, patients) {
    patients.success(function (data) {
        $scope.patients = data;
        $scope.sortType     = 'name';
        $scope.sortReverse  = true;
        $scope.search   = '';
        $scope.currentPage = 1;
        $scope.numPerPage = 2;
        $scope.totalItems = $scope.patients.length;
        $scope.maxSize = 5;
        $scope.paginate = function (value) {
            var begin, end, index;
            begin = ($scope.currentPage - 1) * $scope.numPerPage;
            end = begin + $scope.numPerPage;
            index = $scope.patients.indexOf(value);
            return (begin <= index && index < end);
        };
    })
}]);

app.factory('patients', ['$http', function ($http) {
    return $http.get('api/patients')
            .success(function(data) {
              return data;
            })
            .error(function(err) {
              return err;
            });
}]);

Patient.html

  <form>
    <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-search"></i></div>
        <input type="text" class="form-control" placeholder="Ingrese el Nombre o Apellido del Paciente" ng-model="search" autofocus>
        <div class="input-group-btn">
            <a ui-sref="patient.create" class="btn btn-primary"><i class="fa fa-plus"></i> Nuevo Paciente</a>
        </div>
    </div>
  </form>
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>
                <a href="" ng-click="sortType = 'name'; sortReverse = !sortReverse">
                    Nombre Completo
                    <span ng-show="sortType == 'name'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            <th>
                <a href="" ng-click="sortType = 'identity'; sortReverse = !sortReverse">
                    Identificación
                    <span ng-show="sortType == 'identity'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            <th>
                <a href="" ng-click="sortType = 'age'; sortReverse = !sortReverse">
                    Edad
                    <span ng-show="sortType == 'age'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            <th>
                <a href="" ng-click="sortType = 'telephone'; sortReverse = !sortReverse">
                    Teléfono
                    <span ng-show="sortType == 'telephone'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            <th>
                <a href="" ng-click="sortType = 'email'; sortReverse = !sortReverse">
                    Email
                    <span ng-show="sortType == 'email'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="patient in patients | orderBy:sortType:sortReverse | filter:paginate | filter:search">
            <td>{{ patient.name }} {{ patient.last_name }}</td>
            <td>{{ patient.identity }}</td>
            <td>{{ patient.age }}</td>
            <td>{{ patient.telephone }}</td>
            <td>{{ patient.email }}</td>
        </tr>
        </tbody>
    </table>
    <uib-pagination first-text="Primera" last-text="Última" next-text="&gt;" previous-text="&lt;"
                    total-items="totalItems" items-per-page="numPerPage" max-size="maxSize"
                    ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>

最佳答案

请尝试这个

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

app.controller('PatientController', ['$scope', function ($scope) {
        $scope.patients = [{name:'A',age:25},{name:'B',age:26},{name:'F',age:28},{name:'N',age:50}];
        $scope.sortType     = 'name';
        $scope.sortReverse  = true;
        $scope.search   = '';
        $scope.currentPage = 1;
        $scope.numPerPage = 2;
        $scope.totalItems = $scope.patients.length;
        $scope.maxSize = 5;

        var sortString = function(array, proName,desc){
          array.sort(function(a, b){
           var nameA=a[proName].toString().toLowerCase(), nameB=b[proName].toString().toLowerCase(), temp;
           if(desc){
             temp = nameA; nameA= nameB; nameB=temp;
           }
           if (nameA < nameB)
            return -1
           if (nameA > nameB)
            return 1
           return 0
          });
        };
        sortString($scope.patients, 'name', $scope.sortReverse);
        $scope.orderby = function(name){
$scope.currentPage = 1;
          sortString($scope.patients, name, $scope.sortReverse)
        };
        $scope.paginate = function (value) {
            var begin, end, index;
            begin = ($scope.currentPage - 1) * $scope.numPerPage;
            end = begin + $scope.numPerPage;
            index = $scope.patients.indexOf(value);
            return (begin <= index && index < end);
        };
}]);
}());

<!DOCTYPE html>
<html>

  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@*" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js" data-semver="1.5.2" data-require="angular.js.1.3@*"></script>
    <script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="sac.app">
      <div ng-controller="PatientController">
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>
                <a href="" ng-click="sortType = 'name'; sortReverse = !sortReverse; orderby('name')">
                    Name
                    <span ng-show="sortType == 'name'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>

            <th>
                <a href="" ng-click="sortType = 'age'; sortReverse = !sortReverse; orderby('age')">
                    Age
                    <span ng-show="sortType == 'age'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="patient in patients | filter:paginate | filter:search">
            <td>{{ patient.name }}</td>
            <td>{{ patient.age }}</td>
        </tr>
        </tbody>
    </table>
    <uib-pagination first-text="Primera" last-text="Última" next-text="&gt;" previous-text="&lt;"
                    total-items="totalItems" items-per-page="numPerPage" max-size="maxSize"
                    ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
      </div>
    </div>
  </body>

</html>

关于javascript - Angular 分页不对所有页面进行排序和过滤，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37472541/