AngularJS infinite-scroll with nested objects

Question

Can I use infinite-scroll with nested objects? Assuming we have 3 departments, and each department has 10 employees. Here is a sample code:

<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>

and this is the the js code:

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]);
         }
};

I can see on my console that I am pushing to departments and employees, but the page does not refresh. I am also not able to find any examples where ng-scroll is used with nested ng-repeat and nested objects.

score 0 · Answer 1 · answered Feb 21 '17 at 14:51

0

Considering you have a fixed amount of departments and employees, do you really need an infinite scroll? I don't have any experience with infinite-scroll, but I guess you could try it out with a normal scroll :).

answered Feb 21 '17 at 14:51

Dax

193
1
7

I need infinite scroll on the page. (It has to rotate the view after it gets to the end, it is a requirement). – plamen tassev Feb 21 '17 at 15:38

score 0 · Answer 2 · answered Feb 21 '17 at 19:22

If nested objects are used, we need to scroll on the outer object. No nested looping should be necessary. Note "track by $index".

html code :

<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 code:

this.scroll = function() {

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

        var departmentToPush= this.department[i];

        this.departments.push(departmentToPush);

    }
};

AngularJS infinite-scroll with nested objects

2 Answers2