2014-05-11 67 views
0

客戶數據:如何更改數據,而無需用角和節點JS刷新頁面

accounts = [ 
    Account1 = { 
     name: 'Dan', phone: 1775123, role: 'Client', email: 'none' 
    }, 
    Account2 = { 
     name: 'Messy', phone: 3564576, role: 'Client', email: 'none' 
    }, 
    Account3 = { 
     name: 'Sasha', phone: 34231234, role: 'Client', email: '[email protected]' 
    } 
]; 

DOM:

<div ng-repeat="account in accounts" > 
    <table> 
     <tr> 
      <td><input type="checkbox" ng-change="Toggle(account.name)"/>{{ account.name }}</td> 
     </tr> 
    </table> 
</div> 

我只是想弄清楚什麼是改變的最佳途徑DOM中的數組數據,無需重新加載頁面。例如,我使用ng-repeat指令獲取了一些數據。我選擇了我需要的選項並將它發送到NodeJS - > MongoDB。現在我想在不重新加載我的頁面的情況下將這些數據放在同一個地方。

這聽起來像一個非常典型的問題,但我一直在試圖找到一個相當長的解決方案。

+0

您是否正在更新數組中的數據?最好的方法是遍歷您的賬戶數組以找到編輯後的對象並進行更新。這最好用id屬性來完成。您可以立即執行此操作,也可以根據服務器返回的內容執行此操作。 –

+0

我想基於從服務器返回的內容。我希望看到任何示例.. – Ivan

回答

0

只需更新控制器中的數據,角度將更新dom。這是2個數據綁定一個小例子,我想這是你想要什麼:

Plunker example

在命中db和改變數據的切換方法,你就會把你的服務:

$scope.Toggle = function(idx, account){ 
     $scope.accounts[idx].name = account.name + " Edited"; 
     //replace above with whatever updates the account, ie, businessService.updateAccount(account); 
} 
+0

我必須確保將我的值保存在數據庫中。 – Ivan

+1

@Ivan您不是已經將數據保存到數據庫了嗎?您的問題是要求在將數據保存到數據庫後在本地更新數據。如果您需要知道該答案的代碼位置,請告訴我們您用於執行帖子的代碼。 –

+0

哦這只是一個例子。我的代碼是一個非常不同的故事。但是我會問AJAX這樣的基本原理。如何在沒有頁面重新加載的情況下將數據發送到服務器後更新DOM。我在我的網站有很多地方我必須這樣去。是的,我正在使用NodeJS將數據保存在我的數據庫MongoDB中。 – Ivan

0

我假設你使用post請求(即$ http.post(url,data))將數據發佈到服務器和數據庫。

在角,所有的Ajax調用具有AA承諾的成功方法,因此在成功的方法,做一個GET請求到服務器以檢索您的數據,即:

$http.post(url, data) 
.success(function(){ 
$http.get(url) 
.success(function(data){ 
    updateAccounts(data) // a function to update your accounts array 
} 
}) 

在服務器端,你的節點服務器應該監聽的GET請求以上獲取URL,然後它應該使用回調查詢數據庫的帳戶:

app.get(url, function(req, res){ 
    // Query the database for accounts and send back result of query 
    res.send(200, accounts); 
}) 

希望幫助!

相關問題