Angular.js - 從AJAX請求作爲NG重複採集

Question

在我的web應用程序我正在reciving數據每隔3-4秒從一個AJAX調用API這樣的數據：

$http.get('api/invoice/collecting').success(function(data) { 
    $scope.invoices = data 
} 

然後顯示數據是這樣的：http://jsfiddle.net/geUe2/1/

的問題是，每次我做$scope.invoices = data NG-重複重建這是在的jsfiddle提出的DOM區域，我失去所有<input>值。

我試圖做的事：

• angular.extend()
• 的jQuery.extend其他一些合併
• 深版本\延伸\深複印功能

，但他們不能處理像這樣的情況：

在我的客戶端有一個[invoice1, invoice2, invoice3]和服務器發送給我[invoice1, invoice3]。所以我需要將invoice2從視圖中刪除。

解決此問題的方法有哪些？

Answer 1

出來後，這個@luacassus的回答track byng-repeat指令的選擇是非常有益的，但並沒有解決我的問題。track by函數添加了來自服務器的新發票，但是發生了清除非活動發票的一些問題。 所以，這是我的問題的解決方案：

function change(scope, newData) { 
    if (!scope.invoices) { 
     scope.invoices = []; 
     jQuery.extend(true, scope.invoices, newData) 
    } 
    // Search and update from server invoices that are presented in scope.invoices 
    for(var i = 0; i < scope.invoices.length; i++){ 
     var isInvoiceFound = false; 
     for(var j = 0; j < newData.length; j++) { 
      if(scope.invoices[i] && scope.invoices[i].id && scope.invoices[i].id == newData[j].id) { 
       isInvoiceFound = true; 
       jQuery.extend(true, scope.invoices[i], newData[j]) 
      } 
     } 
     if(!isInvoiceFound) scope.invoices.splice(i, 1); 
    } 
    // Search and add invoices that came form server, but are nor presented in scope.invoices 
    for(var j = 0; j < newData.length; j++){ 
     var isInvoiceFound = false; 
     for(var i = 0; i < scope.invoices.length; i++) { 
      if(scope.invoices[i] && scope.invoices[i].id && scope.invoices[i].id == newData[j].id) { 
       isInvoiceFound = true; 
      } 
     } 
     if(!isInvoiceFound) scope.invoices.push(newData[j]); 
    } 

} 

在我的web應用程序我使用jQuery的.extend()。在lo-dash庫中有一些很好的選擇。

Answer 2

當來自服務器的更新到達時，您需要從DOM收集數據。保存任何相關數據（可能只是輸入值），不要忘記包含數據對象的標識符，如data._id。所有這些都應該保存在臨時對象中，如$scope.oldInvoices。

然後，在從DOM收集它之後，用新數據重新更新DOM（您現在的做法）$scope.invoices = data。 現在，使用underscore.js _.findWhere來查找您的data._id是否存在於新數據更新中，如果是 - 重新指定（您可以在此處使用Angular.extend）保存到數據值的數據值相關發票。

Answer 3

檢查ng-repeat文檔Angular.js - Data from AJAX request as a ng-repeat collection 你可以使用track by選項：

通過tracking_expression表達跟蹤變量 - 您也可以提供可用於對象與集合中相關聯的可選跟蹤功能DOM元素。如果沒有指定跟蹤功能，則ng-repeat通過集合中的標識關聯元素。將多個跟蹤功能解析爲同一個密鑰是錯誤的。 （這意味着兩個不同的對象映射到相同的DOM元素，這是不可能的。）在指定跟蹤表達式之前，過濾器應該應用於表達式。

例如：項目跟蹤item.id是項目來自數據庫時的典型模式。在這種情況下，對象標識無關緊要。只要它們的id屬性相同，就認爲兩個對象是等價的。