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> 

이것은하여 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-repeat 및 중첩 된 개체에서 ng-scroll을 사용하는 예제도 찾을 수 없습니다.

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> 

JS 코드 :

this.scroll = function() { 

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

     var departmentToPush= this.department[i]; 

     this.departments.push(departmentToPush); 

    } 
};