javascript - number - Actualizar la paginación en AngularJS después de filtrar

limitto angular 4

Question

Ya tengo la paginación implementada. Ahora quiero que la paginación se actualice después de filtrar mis resultados.

La forma:

<input type="text" data-ng-model="search.name" data-ng-change="filter()"/>

La lista:

<li data-ng-repeat="data in filtered = (list | filter:search) | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{data.name}}</li>

La paginación

<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize"></pagination>

El controlador:

$scope.filter = function() {
    window.setTimeout(function() { //wait for ''filtered'' to be changed
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
        $scope.setPage = function(pageNo) {
            $scope.currentPage = pageNo;
        };
    }, 10);
};

Mi problema es que la paginación se acaba de actualizar después de hacer clic en un número de página o después de ingresar el siguiente carácter en el campo de entrada. Por lo tanto, es actualizar un paso para llegar tarde.

EDITAR : Agregué la fuente a jsFiddle: http://jsfiddle.net/eqCWL/2/

Answer 1

La respuesta de @abject_error usando $timeout funciona. Edité tu violín con su sugerencia e hice este jsFiddle

ADVERTENCIA

¡Creo que la solución es indicativa de un problema mayor en forma de una condición de carrera!

jsFiddle usando filterFilter y $ watch

y ese violín es el camino a su alrededor para los reales.

Y aquí está la explicación

Su condición de carrera es entre manejar el cambio de search y la disponibilidad de $scope.filtered .

Creo que los culpables a eliminar para resolver esta condición de carrera son:

ng-model="search" ng-change="filter()"

y

ng-repeat="data in filtered = (list | filter:search)......."

Usando ng-change para disparar "filter ()" para hacer el cálculo de noOfPages pero también dependiendo de un cambio en la búsqueda para crear filtered . Al hacerlo de esta manera, se asegura de que la lista filtrada no pueda estar lista a tiempo para calcular el número de páginas, y es por eso que cojear "filter ()" por 10 ms con un tiempo de espera le da la ilusión de un programa en funcionamiento.

Lo que necesita es una forma de "mirar" search cambios y luego filtrar la lista en un lugar donde tenga acceso tanto para crear $scope.filtered como para calcular $scope.noOfPages . Todo en secuencia, sin una carrera.

Angular tiene ese camino! Es posible utilizar el filter filtro en su controlador como una función muy mal llamada: filterFilter . Verifique esto en la Guía de filtros - Uso de filtros en controladores y servicios

Inyectarlo en el controlador.

function pageCtrl($scope, filterFilter) {
    // ...
}

Úselo en una función $watch , documentada en los documentos de ámbitos

$scope.$watch(''search'', function(term) {  
    // Create filtered 
    $scope.filtered = filterFilter($scope.list, term);  

    // Then calculate noOfPages
    $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);  
})

Cambia la plantilla para reflejar nuestra nueva forma. No más en el filtro DOM, o ng-change

<input type="text" ng-model="search" placeholder="Search"/>

y

<li ng-repeat="data in filtered | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
    {{data.name}}
</li>

Answer 2

Simplemente podría usar esta directiva en su lugar:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

Ofrece paginación con un filtro manteniendo el código agradable y limpio.

Felicitaciones a michaelbromley por el gran código.

Answer 3

Usa $scope.$watch angulares $scope.$watch

$scope.$watch(''search'', function(term) {
    $scope.filter = function() {
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
    }
});

Fuente ; http://jsfiddle.net/eqCWL/2/

Demo; http://jsfiddle.net/eqCWL/192/

Answer 4

Use $timeout lugar de window.setTimeOut . $timeout está ajustado correctamente para trabajar de forma coherente en Angular.