无限滚动和 limitTo 不在 ng-repeat 中显示元素

Question

ng-repeat 中的元素通过切换单个元素上的布尔值来过滤。

<div class="message-list" infinite-scroll="loadMore()" infinite-scroll-distance="1" infinite-scroll-parent="true">
     <div ng-repeat="powerplant in powerPlantFilter = (selectablePowerPlants | filter:searchString | limitTo: numberToDisplay) track by powerplant.ID">
           <div class="message" ng-show="powerplant.IsSelected === false && powerplant.IsInSegment === false">
                           ...     
           </div>
     </div>
</div>

我的问题是，如果我应用某个过滤器，应该显示的第一个元素是列表中的编号 659。如果我没有向下滚动，因此 numberToDisplay 高于 659，则列表中不会显示任何元素。 numberToDisplay 的初始值为 35，并像这样递增。

$scope.loadMore = function () {
    if ($scope.numberToDisplay + 20 < $scope.selectablePowerPlants.length) {
        $scope.numberToDisplay += 20;
    } else {
        $scope.numberToDisplay = $scope.selectablePowerPlants.length;
    }
};

我该如何解决这个问题？

JsFiddle 演示问题

Answer 1

我发现了你的问题。

这是一个有效的 jsfiddle：https://jsfiddle.net/3Lsu2ojz/

你的问题是你使用的是 ng-show 而不是过滤器..

ng-show可以理解为'put display: none !important; on this element if condition'

因此，在无限滚动指令中仍会考虑到它，因为元素确实存在并且 limitTo 确实发挥了作用。

您可以使用自定义过滤器，在您的情况下：

$scope.searchString = {'ShowMe': true }

成功了。

还可以考虑使用此语法代替您的语法：

powerplant in powerPlantsFilter = ( selectablePowerPlants | 
                                filter:searchString | 
                                limitTo: numberToDisplay) track by powerplant.ID"

这里的 powerPlantsFilter 不是范围内的集合，而是通过 limitTo 和过滤器的规范动态创建的集合。

无限滚动和 limitTo 不在 ng-repeat 中显示元素

Infinite-scroll and limitTo doesn't display elements in ng-repeat

infinite-scroll

angularjs