AngularJS - 取消重置數組時閃爍效果當範圍刷新

我對Angular（不是Javascript）非常陌生，所以如果我不使用正確的術語/過程，我很抱歉。AngularJS - 取消重置數組時閃爍效果當範圍刷新

我有一個模型，如下所示：

BuyingGroups: { 
    availableBuyingGroups: [ 
     obj1: { 
     ID: XX, 
     Title: XX 
     }, 
     .... 
    ], 
    affiliatedBuyingGroups: [ 
     obj1: { 
     ID: XX, 
     Title: XX 
     }, 
     .... 
    ] 
}

有（2）窗格（把它們看成列表框）。用戶可以從左側窗格向右側添加對象，反之亦然。基本上我只是將對象從一個組移動到另一個組。

上的負載，我把這些（2）名單，並使用angular.copy複製那些到另一個靜態列表，以免影響原有的（我讀的角度使用上下文，如果你不使用angular.copy ）。

重置（取消按鈕）時，我將原始列表重置爲副本（以保持原始狀態）。 問題是取消按鈕事件，該列表似乎「重複」了約0.3秒，在窗格上閃爍，然後恢復到原始狀態（在頁面加載時）。

我試圖清除數組，設置超時等，但似乎沒有任何效果。有沒有（或者應該有）更有效，更好的方法？也許我不完全瞭解角度如何綁定到$scope的變化？

自我= $範圍（FYI）

self.companyBuyingGroups = response.data.BuyingGroups; 
self.staticCompanyBuyingGroupsModel = angular.copy(self.companyBuyingGroups); 
self.staticCompanyAffiliationsModel = angular.copy(self.companyAffiliations);

HTML

<!-- affiliated instance --> 
<li ng-repeat="group in companyBuyingGroups.affiliatedBuyingGroups"> 
    ..... 
</li>

復位按鈕功能

self.resetBuyingGroupsForm = function() { 
    self.companyBuyingGroups.affiliatedBuyingGroups = []; 
    self.companyBuyingGroups.availableBuyingGroups = []; 

    //setTimeout(function() { 
      self.companyBuyingGroups.affiliatedBuyingGroups = angular.copy(self.staticCompanyBuyingGroupsModel.affiliatedBuyingGroups); 
      self.companyBuyingGroups.availableBuyingGroups = angular.copy(self.staticCompanyBuyingGroupsModel.availableBuyingGroups); 
      //self.companyBuyingGroups = angular.copy(self.staticCompanyBuyingGroupsModel); 
    //}, 50) 
}

編輯

我試圖清除重置前的陣列，沿W /不清除它們。另外我的數組超小（少於50個對象）。

要解釋更多的「閃爍」，在取消功能，右窗格似乎添加副本（而不是使用原來的）。意思是，如果原始列表有3個項目，並且我從左側窗格中添加了一個項目（使其爲4），則調用取消功能，右側窗格顯示7個項目約0.3秒，然後恢復爲3個項目（這是原來的）。

來源

2016-02-04 Rob Scott

爲什麼在使用angular.copy設置默認值之前清除數組？ –

「...然後恢復到它的原始狀態（在頁面加載）....」您是否重新加載頁面取消？普拉克將有助於更輕鬆地調試問題。 –

@NMittal沒有抱歉我沒有重新加載頁面。 –

您應該將track by group.ID附加到您的ng-repeat表達式，這將允許AngularJS在列表重置時重用DOM，這將解決問題。

當您重置列表時，Angular首先需要從DOM中刪除每個項目（因爲它們不在數組中），然後將它們添加回來。使用track by group.ID將允許ngRepeat通過ID而不是引用來跟蹤它們，並且它現在知道要刪除哪個項目以及要保留哪個項目。

來源

2016-02-05 11:03:25 Iso

OMG我在一週前對此進行了閱讀，但並不知道使用它的真正好處。非常感謝！！！！！ –

歡呼，我會推薦Ben Nadel的文章：http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm – Iso

是的，我是去問問好處。 Apprec的博客鏈接 - 有趣的我讀過這個完全相同的博客文章，但顯然沒有足夠沉沒。 –

＃1

它可能會閃爍，因爲首先清空數組。

嘗試在您的重置功能中註釋前=[]的前兩個分配，並且只保留兩個angular.copy分配。

＃2

如果您遇到的問題可能需要一段時間巨大的名單被重新描繪，考慮到陣列模式的控制器比較初始的一個 - 找到並保住那些已經呈現的列表項和只添加/刪除不相應的。

來源

2016-02-04 20:55:18 Nadi

不幸的是我曾嘗試過多種選擇，包括不清空數組。而我的原始數組少於50個對象。 –

AngularJS - 取消重置數組時閃爍效果當範圍刷新

回答

相關問題