asp.net mvc - La paginación angular no se actualiza cuando la lista atada cambia debido al filtrado en un cuadro de texto de entrada

asp.net-mvc angularjs

Question

Aquí está el escenario:

Estoy usando un sitio ASP.NET MVC con Angular JS y Boostrap UI. Tengo una lista ul dinámica llena de datos alimentados a través de una llamada de controlador a AngularJS, filtrando en esa lista a través de un cuadro de búsqueda de entrada. La lista también se controla a través de la paginación (control UI Bootstrap) que configuré para mostrar 10 resultados por página para la lista de aproximadamente 100 elementos. Esta lista se filtra a medida que el usuario escribe en el cuadro de búsqueda; sin embargo, me gustaría que la paginación se actualice también, así que considere el siguiente ejemplo:

La lista tiene 10 páginas de elementos (100 elementos), el usuario escribe algo de texto en el cuadro de búsqueda de entrada que filtra la lista a unos 20 elementos, por lo que la paginación debe actualizarse de 10 páginas a dos páginas.

Me imagino que debe haber una configuración de $ watch en algún lugar, tal vez en la lista de elementos después de que se haya filtrado y luego actualice el recuento de páginas de paginación. Sin embargo, soy bastante nuevo en AngularJS ¿alguien puede explicarme cómo se puede hacer esto?

Muchas gracias. He publicado mi código a continuación:

<div data-ng-app="dealsPage">
<input type="text" data-ng-model="cityName" />
<div data-ng-controller="DestinationController">
    <ul>
        <li data-ng-repeat="deals in destinations | filter: cityName |
            startFrom:currentPage*pageSize | limitTo:pageSize">{{deals.Location}}</li>
    </ul>
    <br />
    <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" 
                max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
</div>

 var destApp = angular.module(''dealsPage'', [''ui.bootstrap'', ''uiSlider'']);
destApp.controller(''DestinationController'', function ($scope, $http) {
    $scope.destinations = {};
    $scope.currentPage = 1;
    $scope.pageSize = 10;

    $http.get(''/Deals/GetDeals'').success(function (data) {
        $scope.destinations = data;
        $scope.noOfPages = data.length / 10;
        $scope.maxSize = 5;
    });
});

destApp.filter(''startFrom'', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

Answer 1

Debido a que su paginación es una combinación de filtros encadenados, Angular no tiene idea de que cuando cityName cambia, debe restablecer currentPage a 1. Deberá manejarlo usted mismo con su propio $watch .

También querrás ajustar tu filtro startFrom para decir (currentPage - 1) * pageSize , de lo contrario, siempre comienzas en la página 2.

Una vez que lo haya hecho, notará que su paginación no es precisa, porque todavía se basa en la destination.length del destination.length , y no en el subconjunto filtrado de destinos. Para eso, vas a necesitar mover tu lógica de filtrado de tu vista a tu controlador así:

http://jsfiddle.net/jNYfd/

HTML

<div data-ng-app="dealsPage">
    <input type="text" data-ng-model="cityName" />
    <div data-ng-controller="DestinationController">
        <ul>
            <li data-ng-repeat="deals in filteredDestinations | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize">{{deals.Location}}</li>
        </ul>
        <br />
        <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
    </div>

JavaScript

var destApp = angular.module(''dealsPage'', [''ui.bootstrap'']);

destApp.controller(''DestinationController'', function ($scope, $http, $filter) {
    $scope.destinations = [];
    $scope.filteredDestinations = [];

    for (var i = 0; i < 1000; i += 1) {
        $scope.destinations.push({
            Location: ''city '' + (i + 1)
        });
    }

    $scope.pageSize = 10;
    $scope.maxSize = 5;

    $scope.$watch(''cityName'', function (newCityName) {
        $scope.currentPage = 1;
        $scope.filteredDestinations = $filter(''filter'')($scope.destinations, $scope.cityName);
        $scope.noOfPages = $scope.filteredDestinations.length / 10;
    });
});

destApp.filter(''startFrom'', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

Answer 2

La versión compartida en jsfiddle es compatible con ui-bootstrap 0.5.0 pero a partir de 0.6.0 se han producido cambios importantes.

Aquí hay una versión que usa las siguientes bibliotecas:

• angular 1.2.11
• angular-ui-bootstrap 0.10.0
• bootstrap 3.1.0

Aquí hay un plunker para lo mismo:

Angular UI Bootstrap Pagination

Answer 3

Hola, traté de conectar esto con Firebase usando Angular Fire y solo funciona después de que escribo algo en la entrada de búsqueda. En el método $ scope. $ Watch, utilicé orderByPriorityFilter de Angular Fire para convertir el objeto a una matriz.

$scope.$watch(''search'', function(oldTerm, newTerm) {
  $scope.page = 1;
  // Use orderByPriorityFilter to convert Firebase Object into Array
  $scope.filtered = filterFilter(orderByPriorityFilter($scope.contacts), $scope.search);
  $scope.lastSearch.search = oldTerm;
  $scope.contactsCount = $scope.filtered.length;
});

La carga inicial no carga ningún contacto. Es solo después de que empiezo a escribir en el campo de búsqueda de entrada.