kątowa stronicowanie nie aktualizowanie po związaniu lista zmian w związku z filtrowania na polu wejściowym

Question

oto scenariusz:

Używam witryny ASP.NET MVC z Kątowymi JS i Boostrap UI. Mam dynamiczną listę ul wypełnioną danymi przesyłanymi przez wywołanie kontrolera do AngularJS, filtrując tę ​​listę za pomocą pola wyszukiwania wejściowego. Lista jest również kontrolowana poprzez paginację (kontrola Bootstrap), którą skonfigurowałem, aby wyświetlać 10 wyników na stronie dla listy 100 przedmiotów. Ta lista jest filtrowana podczas wpisywania przez użytkownika w polu wyszukiwania, ale chciałbym, aby paginacja również się zaktualizowała, więc rozważ następujący przykład:

Lista zawiera 10 stron pozycji (100 pozycji), użytkownik wpisze trochę tekstu w polu wyszukiwania wejściowego, które filtruje listę do 20 elementów, tak aby paginacja była aktualizowana z 10 stron na dwie strony.

Sądzę, że musi być gdzieś instalacja zegarka $, być może na liście elementów po jej filtrowaniu, a następnie zaktualizować liczbę stron stronicowania, jednak jestem całkiem nowa w AngularJS, więc może ktoś mi wytłumaczy, jak to może być zrobione?

Dziękuję bardzo. Pisałem mój poniższy kod:

<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

Ponieważ paginacja jest kombinacją przykuty filtry, kątowa nie ma pojęcia, że ​​gdy cityName zmiany, należy je zresetować currentPage do 1. Będziesz musisz sobie z tym poradzić z własnym $watch.

Warto również dostosowanie filtr startFrom powiedzieć (currentPage - 1) * pageSize, inaczej, zawsze zaczynają się od strony 2.

Gdy dojdziesz, że dzieje, można zauważyć, że podział na strony nie jest dokładna, bo to nadal oparty na destination.length, a nie przefiltrowanym podzestawie miejsc docelowych. W tym celu będziesz musiał przenieść swoją logikę filtrowania z myślą o kontrolerze tak:

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

Wersja współdzielony na jsfiddle jest kompatybilny z ui-bootstrap 0.5.0, ale od 0.6.0 zostały przerwane zmiany.

Oto wersja wykorzystuje następujące biblioteki:

• kątowe 1.2.11
• kątowe-ui-bootstrap 0.10.0
• bootstrap 3.1.0

Oto plunker za ten sam:

Angular UI Bootstrap Pagination

Answer 3

Witam próbowałem podpiąć ten z Firebase użyciu kątowa ogień i to działa tylko po wpisaniu czegoś w wejściu wyszukiwania. W metodzie $ scope. $ Watch użyłem klasy orderByPriorityFilter Angula Fire, aby przekonwertować obiekt na tablicę.

$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; 
}); 

Obciążenie początkowe nie ładuje żadnych kontaktów. Dopiero gdy zacznę pisać w polu wyszukiwania wejściowego.