AngularJS бесконечный свиток с вложенными объектами

Question

Можно ли использовать бесконечный свиток с вложенными объектами? Предполагая, что у нас есть 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> 

и это кодируют ЯША:

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 и вложенными объектами.

Answer 1

Учитывая, что у вас есть фиксированное количество отделов и служащих, вам действительно нужен бесконечный свиток? У меня нет опыта с бесконечным прокруткой, но я думаю, вы могли бы попробовать его с помощью обычного прокрутки :).

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

код расслоение плотной:

this.scroll = function() { 

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

     var departmentToPush= this.department[i]; 

     this.departments.push(departmentToPush); 

    } 
};