我是angular.js的新手,看到了我不喜欢的东西。当我同时过滤和限制数据时,限制似乎会影响过滤器,并且无法在原始数组源中进行搜索。我想念什么吗?

更新:
我正在尝试使用分页,过滤器和其他一些东西来创建一个简单的数据表指令,但这令我发疯。我已经看到了答案和评论,并且想知道我尝试达到的过程是否错误,但是不,从逻辑上讲,限制一定不会影响筛选器(我认为是),因为也许在某些时候您会需要在整个源中进行搜索,而不是在有限的部分中进行搜索,它们应该是分开的行为。这不是我在主要数据表框架中看到的默认行为吗?

这是描述问题的示例:



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>

最佳答案

您遇到问题是因为您的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

关于javascript - Angular 过滤器和limitTo不能按预期工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38767579/

10-11 23:24
查看更多