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

JSコード：

this.scroll = function() { 

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

     var departmentToPush= this.department[i]; 

     this.departments.push(departmentToPush); 

    } 
};