AngularJS无限滚动嵌套对象答案

【问题标题】：AngularJS infinite-scroll with nested objectsAngularJS无限滚动嵌套对象
【发布时间】：2017-02-22 03:22:19
【问题描述】：

我可以对嵌套对象使用无限滚动吗？假设我们有 3 个部门，每个部门有 10 名员工。这是一个示例代码：

<div infinite-scroll="$ctrl.scroll()">
    <div ng-repeat="department in $ctrl.departments">
         /* display data here */
         <div ng-repeat="employee in $ctrl.employees">
         /* display data here */
         </div>
    </div>
</div>

这是js代码：

this.scroll = function() {
    console.log("Infinite Scroll Triggered");
    for(var i = 0; i < 3; i++) {
        console.log("pushing " + this.departments[i].name); 
        this.departments.push(this.department[i]);

        for(var j = 0; j < 10; j++){
               console.log("pushing " + this.employee[i].name);
               this.employees.push(this.employee[i]);
         }
};

我可以在控制台上看到我正在向部门和员工推送，但页面没有刷新。我也找不到任何将 ng-scroll 与嵌套 ng-repeat 和嵌套对象一起使用的示例。

【问题讨论】：

标签： angularjs nginfinitescroll

【解决方案1】：

考虑到你有固定数量的部门和员工，你真的需要无限卷轴吗？我对无限滚动没有任何经验，但我想您可以尝试使用普通滚动:)。

【讨论】：

我需要在页面上无限滚动。（它必须在到达结束后旋转视图，这是一个要求）。

【解决方案2】：

如果使用嵌套对象，我们需要在外部对象上滚动。不需要嵌套循环。注意“track by $index”。

html代码：

<div infinite-scroll="$ctrl.scroll()">
    <div ng-repeat="department in $ctrl.departments track by $index">
         /* display data here */
         <div ng-repeat="employee in $ctrl.employees">
         /* display data here */
         </div>
    </div>
</div>

js代码：

this.scroll = function() {

    for(var i = 0; i < 3; i++) { 

        var departmentToPush= this.department[i];

        this.departments.push(departmentToPush);

    }
};

【讨论】：