Угловой фильтр и limitTo не работает как ожидалось

Question

Я новичок в angular.js, и я вижу то, что мне не нравится. Когда я фильтрую и ограничиваю данные в одно и то же время, кажется, что предел влияет на фильтр, и он не может выполнить поиск в исходном источнике массива. Я что-то упускаю?

UPDATE: Вещь я пытаюсь создать простую директиву таблицы данных с нумерацией страниц, фильтр и некоторые другие вещи, но это сводит меня с ума. Я видел ответы и комментарии, и мне интересно, ошибочна ли процедура, которую я пытаюсь достичь, но нет, логически, ограничение не должно влиять на фильтр (я так думаю), потому что, может быть, Вам нужно искать обратно во всем источнике, а не в ограниченной части, они должны быть разделены поведением. Разве это не поведение по умолчанию, которое я наблюдал в основных структурах datatables?

Вот пример описания проблемы:

angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) { 
 
     $scope.q="john" 
 
     $scope.friends = [ 
 
      {name:'John', age:25, gender:'boy'}, 
 
      {name:'Jessie', age:30, gender:'girl'}, 
 
      {name:'Johanna', age:28, gender:'girl'}, 
 
      {name:'Joy', age:15, gender:'girl'}, 
 
      {name:'Mary', age:28, gender:'girl'}, 
 
      {name:'Peter', age:95, gender:'boy'}, 
 
      {name:'Sebastian', age:50, gender:'boy'}, 
 
      {name:'Erika', age:27, gender:'girl'}, 
 
      {name:'Patrick', age:40, gender:'boy'}, 
 
      {name:'Samantha', age:60, gender:'girl'} 
 
     ]; 
 
     });

.example-animate-container { 
 
     background:white; 
 
     border:1px solid black; 
 
     list-style:none; 
 
     margin:0; 
 
     padding:0 10px; 
 
     } 
 

 
     .animate-repeat { 
 
     line-height:30px; 
 
     list-style:none; 
 
     box-sizing:border-box; 
 
     } 
 

 
     .animate-repeat.ng-move, 
 
     .animate-repeat.ng-enter, 
 
     .animate-repeat.ng-leave { 
 
     transition:all linear 0.5s; 
 
     } 
 

 
     .animate-repeat.ng-leave.ng-leave-active, 
 
     .animate-repeat.ng-move, 
 
     .animate-repeat.ng-enter { 
 
     opacity:0; 
 
     max-height:0; 
 
     } 
 

 
     .animate-repeat.ng-leave, 
 
     .animate-repeat.ng-move.ng-move-active, 
 
     .animate-repeat.ng-enter.ng-enter-active { 
 
     opacity:1; 
 
     max-height:30px; 
 
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script> 
 
<div ng-app="ngRepeat" ng-controller="repeatController"> 
 
The flollowing example shows when you filter and limit the data at the same time, you can not filter the items before the current position. 
 
<br/> 
 
<b>position</b> : 5<br/> 
 
<b>limitTo</b> : 5<br/> 
 
<b>filter</b> : { '$' : '{{q}}' }<br/> 
 
     I have {{friends.length}} friends. They are: 
 
     <input type="search" value="john" ng-model="q" placeholder="filter friends..." aria-label="filter friends" /> 
 
     <ul class="example-animate-container"> 
 
      <li class="animate-repeat" ng-repeat="friend in friends | filter:q | limitTo : 5 : 5 as result track by $index"> 
 
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. 
 
      </li> 
 
      <li class="animate-repeat" ng-if="results.length == 0"> 
 
      <strong>No results found...</strong> 
 
      </li> 
 
     </ul> 
 
<br/>As you can see there's no results. 
 
     </div>

Answer 1

Следуя философии DataTables.net, когда вы начинаете данные фильтра, она возвращается к первой странице. Я надеюсь, что это помогает другим

angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) { 
 
     $scope.position=5; 
 
     $scope.resetPagination = function(){ 
 
      if(this.position !== 0) this.position = 0; 
 
     } 
 
     $scope.friends = [ 
 
      {name:'John', age:25, gender:'boy'}, 
 
      {name:'Jessie', age:30, gender:'girl'}, 
 
      {name:'Johanna', age:28, gender:'girl'}, 
 
      {name:'Joy', age:15, gender:'girl'}, 
 
      {name:'Mary', age:28, gender:'girl'}, 
 
      {name:'Peter', age:95, gender:'boy'}, 
 
      {name:'Sebastian', age:50, gender:'boy'}, 
 
      {name:'Erika', age:27, gender:'girl'}, 
 
      {name:'Patrick', age:40, gender:'boy'}, 
 
      {name:'Samantha', age:60, gender:'girl'} 
 
     ]; 
 
     });

.example-animate-container { 
 
     background:white; 
 
     border:1px solid black; 
 
     list-style:none; 
 
     margin:0; 
 
     padding:0 10px; 
 
     } 
 

 
     .animate-repeat { 
 
     line-height:30px; 
 
     list-style:none; 
 
     box-sizing:border-box; 
 
     } 
 

 
     .animate-repeat.ng-move, 
 
     .animate-repeat.ng-enter, 
 
     .animate-repeat.ng-leave { 
 
     transition:all linear 0.5s; 
 
     } 
 

 
     .animate-repeat.ng-leave.ng-leave-active, 
 
     .animate-repeat.ng-move, 
 
     .animate-repeat.ng-enter { 
 
     opacity:0; 
 
     max-height:0; 
 
     } 
 

 
     .animate-repeat.ng-leave, 
 
     .animate-repeat.ng-move.ng-move-active, 
 
     .animate-repeat.ng-enter.ng-enter-active { 
 
     opacity:1; 
 
     max-height:30px; 
 
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script> 
 
<div ng-app="ngRepeat" ng-controller="repeatController"> 
 
The flollowing example shows when you filter and limit the data at the same time, you can not filter the items before the current position. 
 
<br/> 
 
<b>limitTo</b> : 5<br/> 
 
<b>position</b> : {{position}}<br/> 
 
<b>filter</b> : { '$' : '{{q}}' }<br/> 
 
     I have {{friends.length}} friends. They are: 
 
     <input type="search" value="john" ng-model="q" placeholder="filter friends..." aria-label="filter friends" ng-change="resetPagination()"/> 
 
     <ul class="example-animate-container"> 
 
      <li class="animate-repeat" ng-repeat="friend in friends | filter:q | limitTo : 5 : position as results track by $index"> 
 
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. 
 
      </li> 
 
      <li class="animate-repeat" ng-if="results.length == 0"> 
 
      <strong>No results found...</strong> 
 
      </li> 
 
     </ul> 
 
<br/>As you can see there's results. 
 
     </div>

Answer 2

Вы испытываете проблемы, потому что ваш limitTo ограничивает 5 элементов, начиная с индекса 5, когда вы будете искать там, скорее всего, не 5 пунктов, особенно не с предоставленными данными.

Изменить

limitTo : 5 : 5 track by $index 

в

limitTo : 5 track by $index 

или

limitTo : 5 : 0 track by $index // 0 = Index at which to begin limitation 

Answer 3

Я нашел результат, используя этот

ng-repeat="friend in friends | filter:q | limitTo : 5 as results track by $index" 

Answer 4

Это может помочь you..this это с пагинацией

<html> 
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script> 
<script> 
    var app=angular.module('ngRepeat', ['ngAnimate']); 
    app.controller('repeatController', function($scope) { 
    $scope.q="john"; 
    $scope.currentPage = 0; 
    $scope.pageSize = 5; 
    $scope.numberOfPages=function(){ 
     return Math.ceil($scope.friends.length/$scope.pageSize);     
    } 
    $scope.friends = [ 
     {name:'John', age:25, gender:'boy'}, 
     {name:'Jessie', age:30, gender:'girl'}, 
     {name:'Johanna', age:28, gender:'girl'}, 
     {name:'Joy', age:15, gender:'girl'}, 
     {name:'Mary', age:28, gender:'girl'}, 
     {name:'Peter', age:95, gender:'boy'}, 
     {name:'Sebastian', age:50, gender:'boy'}, 
     {name:'Erika', age:27, gender:'girl'}, 
     {name:'Patrick', age:40, gender:'boy'}, 
     {name:'Samantha', age:60, gender:'girl'} 
    ]; 
    }); 
    app.filter('startFrom', function() { 
    return function(input, start) { 
     start = +start; //parse to int 
     return input.slice(start); 
    } 
}); 
</script> 


<style> 
    .example-animate-container { 
     background: white; 
     border: 1px solid black; 
     list-style: none; 
     margin: 0; 
     padding: 0 10px; 
    } 

    .animate-repeat { 
     line-height: 30px; 
     list-style: none; 
     box-sizing: border-box; 
    } 

    .animate-repeat.ng-move, 
    .animate-repeat.ng-enter, 
    .animate-repeat.ng-leave { 
     transition: all linear 0.5s; 
    } 

    .animate-repeat.ng-leave.ng-leave-active, 
    .animate-repeat.ng-move, 
    .animate-repeat.ng-enter { 
     opacity: 0; 
     max-height: 0; 
    } 

    .animate-repeat.ng-leave, 
    .animate-repeat.ng-move.ng-move-active, 
    .animate-repeat.ng-enter.ng-enter-active { 
     opacity: 1; 
     max-height: 30px; 
    } 
</style> 

<div ng-app="ngRepeat" ng-controller="repeatController"> 
    The flollowing example shows when you filter and limit the data at the same time, you can not filter the items before the 
    current position. 
    <br/> 
    <b>position</b> : 5<br/> 
    <b>limitTo</b> : 5<br/> 
    <b>filter</b> : { '$' : '{{q}}' }<br/> I have {{friends.length}} friends. They are: 
    <input type="search" value="john" ng-model="q" placeholder="filter friends..." aria-label="filter friends" /> 
    <ul class="example-animate-container"> 
     <li class="animate-repeat" ng-repeat="friend in friends | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize as results track by $index"> 
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. 
     </li> 
     <li class="animate-repeat" ng-if="results.length == 0"> 
      <strong>No results found...</strong> 
     </li> 
    </ul> 
    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> 
    Previous 
</button> 
{{currentPage+1}}/{{numberOfPages()}} 
<button ng-disabled="currentPage >= friends.length/pageSize-1" ng-click="currentPage=currentPage+1;"> 
    Next 
</button> 
</div>