Javascript OrderBy和渐进加载AngularJS

当我在ng repeat中使用orderBy时遇到了一个问题，该命令带有一个自动递增的limito。当页面加载几个元素时，该指令停止工作并停止增加元素限制

这是html：

<div class="row" id="main">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate"
             ng-if="!errorDialogActive"
             ng-repeat="build in builds.builds.build | limitTo:totalDisplayed | orderBy:'lastBuildDetails.startDate' : true track by build._id"
             ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}"
             id="{{build._id}}"
             progressive-loading>
            <div class="title-container animate" ><p>{{build._buildTypeId}}</p></div>
            <div class="update-container animate col-xs-12">
            <time class="time">{{build.buildDate | date : 'dd.MM.yyyy H:mm:s'}} </time>
            </div>
        </div>
    </div>

最后是loadMore函数

    $scope.loadMore = function () {
        if ($scope.totalDisplayed >= $scope.size) {
            console.log('no more builds : ' + $scope.totalDisplayed);
            $scope.loaded=true;
        } else {
            $scope.totalDisplayed += 2;
            console.log('More : ' + $scope.totalDisplayed);
            $scope.totalDisplayedPercentage = (($scope.totalDisplayed*100)/$scope.size);
            console.log('Percentage : ' + $scope.totalDisplayedPercentage);
        }
    };

---

对不起，我的英语不好，如果您不懂我的意思或需要更多信息，请告诉我。

您的指令链接函数只调用一个新的呈现元素，因此当

orderBy

起作用时，新的呈现元素可以放在中间和特殊属性

范围内。$last

当然将为false，所以不要开始超时

为了解决您的问题，可以模拟计数器，例如：
注意：这是一个最简单的示例，可能只有在页面上有一个示例时才能正常工作

app.directive('progressiveLoading', ['$timeout', function ($timeout) { 
    var counter=1;
    return function (scope) { 
        if (counter == scope.displayStep) { 
            counter = 1;
            $timeout(function () { 
                console.log('Im the last Displayed, Loading more'); 
                scope.loadMore(); 
            }, 500); 
        }else{
            counter += 1;
        }
    }; 
}]);

非常简单的示例：

//代码在这里
var-app=angular.module（'app'，[]）；
app.directive（'progressiveLoading'，['$timeout'，
函数（$timeout）{
var计数器=1；
返回函数（范围）{
if（计数器==范围.显示步骤）{
计数器=1；
$timeout（函数（）{
log（'Im是最后显示的，正在加载更多'）；
scope.loadMore（）；
}, 500);
}否则{
计数器+=1；
}
};
}
]);
app.controller（'ctrl'，['$scope'，
职能（$范围）{
$scope.totalDisplayed=2；
$scope.displayStep=2；
$scope.loaded=false；
$scope.build=[{
_id:1，
_状态：“成功”，
最新资料：{
起始日期：1
},
_buildTypeId:1
}, {
_id:2，
_状态：“成功”，
最新资料：{
开始日期：10
},
_buildTypeId:2
}, {
_id:3，
_状态：“成功”，
最新资料：{
开始日期：9
},
_buildTypeId:3
}, {
_id:4，
_状态：“成功”，
最新资料：{
开始日期：8
},
_buildTypeId:4
}, {
_id:5，
_状态：“成功”，
最新资料：{
开始日期：7
},
_buildTypeId:5
}, {
_id:6，
_状态：“成功”，
最新资料：{
开始日期：6
},
_buildTypeId:6
}, {
_id:7，
_状态：“成功”，
最新资料：{
开始日期：5
},
_buildTypeId:7
}, {
_id:8，
_状态：“成功”，
最新资料：{
开始日期：4
},
_buildTypeId:8
}, {
_id:9，
_状态：“成功”，
最新资料：{
开始日期：3
},
_buildTypeId:9
}, {
_id:10，
_状态：“成功”，
最新资料：{
开始日期：2
},
_buildTypeId:10
}];
$scope.size=$scope.build.length；
$scope.totalDisplayedPercentage=（$scope.totalDisplayed*100）/$scope.size）；
$scope.loadMore=函数（）{
log（'loadMore'，$scope.totaldisplated，$scope.size）；
如果（$scope.totalDisplayed>=$scope.size）{
log（'不再生成：'+$scope.totalDisplayed）；
$scope.loaded=true；
}否则{
$scope.totalDisplayed+=$scope.displayStep；
log（'More:'+$scope.totalDisplayed）；
$scope.totalDisplayedPercentage=（$scope.totalDisplayed*100）/$scope.size）；
log（'Percentage:'+$scope.totalDisplayedPercentage）；
}
};
}
])

{{totalDisplayedPercentage}}}%
{{build.\u buildTypeId}

你能提供或吗？我试过了，但我不能让plunker工作，因为有太多的外部依赖，我可以展示它是如何工作的，如果有必要，我可以添加提供代码：（请尝试仅使用OP中的代码和Plunkers的示例数据这是我的问题的演示视频，再次为无法提供Plunkerry而感到抱歉。请完美地查看consoleWorks中的错误，谢谢，并为花这么长时间回答而感到抱歉。@Vistor它没有完成解决方案，只是一个示例，您应该对它进行测试。正如我上面所说的-它可能不工作或不可用。）在某些情况下，我知道错误，但我在我的应用程序中测试它，没有问题，它在所有情况下都很好。@ Vistor，所以很高兴帮助你：-你学会使用Pasker-GR8解决方案，但不能实现它吗？

app.directive('progressiveLoading', ['$timeout', function ($timeout) { 
    var counter=1;
    return function (scope) { 
        if (counter == scope.displayStep) { 
            counter = 1;
            $timeout(function () { 
                console.log('Im the last Displayed, Loading more'); 
                scope.loadMore(); 
            }, 500); 
        }else{
            counter += 1;
        }
    }; 
}]);