Sayfalandırma ile bileşik filtreleme AngularJs

Question

Açılıyorum uygulamasında, bileşik filtrelemeyi pagination ile birlikte kullanmaya çalışıyorum. Her sütun üç sütun ile x girişleri ile bir tablo olacak. Kullanıcının, giriş metnine dayanarak sütunları filtreleyebileceği her sütunun üzerinde bir giriş var. Filtreleri, sonuçları en iyi duruma göre daraltmak için bileşimi kullanıyorum - ancak benim kullanımımda hala bir sayfada görüntülenecek çok fazla şey olabilir, bu yüzden sayfalama kullanmaya çalışıyorum.

Tablo gövdesi şuna benzer:

<tbody> 
    <tr> 
     <td class="col-md-4"> 
     <input type="text" ng-model="nameFilter" class="form-control" placeholder="Name"> 
     </td> 
     <td class="col-md-4"> 
     <input type="text" ng-model="ageFilter" class="form-control" placeholder="Age"> 
     </td> 
     <td class="col-md-4"> 
     <input type="text" ng-model="stateFilter" class="form-control" placeholder="State"> 
     </td> 
    </tr> 
    <tr data-ng-repeat="person in people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter} | limitTo: itemsPerPage"> 
     <td class="col-md-4">{{person.name}}</td> 
     <td class="col-md-4">{{person.age}}</td> 
     <td class="col-md-4">{{person.state}}</td> 
    </tr> 
    </tbody> 

ben yaşıyorum zor kısmı filtreler uygulanmış çalışmak için sayfalama oluyor. Tekil bir arama alanında this one where the author uses a $watch gibi bir örnek gördüm ve yine de sayfalandırmayı yönetebiliyorum. Ayrıca, araştırma yoluyla, kullanılabilecek bir $watchCollection olduğunu gördüm, ancak nasıl uygulanacağını bilmiyorum.

$scope.$watchCollection('[nameFilter, ageFilter, stateFilter]', function(newValues) { 
     //not sure what to do here. 
     console.debug(newValues); 

     $scope.filtered = '';; //really it should equal the now filtered by 3 filters group of people 
     $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.itemsPerPage); 
    }); 

Bu durumda kullanmak için en iyi seçim bile saatler midir? Çalıştığımın bir örneği olarak bu çalışma plunker çalışmasına sahibim, ancak yine de sayfalandırmayla ilgili bir kılavuza ihtiyacım var. Benim sahip olduğum sorulardan biri de, sayfa numaralandırmanın özellikle veri listesiyle nasıl uygulanacağından emin değilim. Başka örnekler gördüm ve taklit ettim ama sanırım filtreleme onu karıştırıyor olabilir (emin değil)? Herhangi bir yardım takdir edildi.

Answer 1

Filtreleri izlemek zorunda değilsiniz. Filtrelerinizi yalnızca sayfalarınıza ayırmanız gerekir. Bu şekilde açısal her şeyi halleder ve kontrol cihazına ek kod yazmanıza gerek yoktur. Senin plunker güncelledim ve her şey açısal bağlamaları ile nasıl uygulandığını görebilirsiniz.

Ayrıca PAGINATION kolları limitTo filtre var

<tr data-ng-repeat="person in people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter} | limitTo: itemsPerPage: (currentPage - 1) * itemsPerPage"> 
       <td class="col-md-4">{{person.name}}</td> 
       <td class="col-md-4">{{person.age}}</td> 
       <td class="col-md-4">{{person.state}}</td> 
      </tr> 


<ul uib-pagination 
     total-items="(people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter}).length" 
     items-per-page="itemsPerPage" 
     boundary-links="true" ng-model="currentPage"></ul> 

https://plnkr.co/edit/5bW3XV3eEmomOtHJWW7x?p=preview