current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

Client data:

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>

I just want to figure out what's the best way to change array data in DOM without page reloading. For instance I got some data in view using ng-repeat directive. I selected the option I needed and sent it to NodeJS -> MongoDB. Now I want to get this data in the same place without reloading my page.

It sounds like a very typical question, but I've been trying to find a solution for quite long time.

share|improve this question
    
Are you looking to just update the data in your array. Best way is to iterate through your accounts array to find the edited object and update it. This is best done with an id property. You can do this right away, or based on what is returned from the server. – Ben Felda May 11 '14 at 15:02
    
I want to base on what is returned from the server. I'd like to see any examples.. – Ivan May 11 '14 at 15:14
up vote 0 down vote accepted

Just update the data in your controller and angular will update the dom. This is a small example of 2 way data binding which I think is what you want:

Plunker example

In the Toggle method you will put in your service that hits the db and changes the data:

 $scope.Toggle = function(idx, account){
      $scope.accounts[idx].name = account.name + " Edited";
      //replace above with whatever updates the account, ie, businessService.updateAccount(account);
 }
share|improve this answer
    
I have to make sure that my value is saved in database. – Ivan May 11 '14 at 15:41
1  
@Ivan Aren't you already saving the data to your database? Your question is asking up to update the data locally after saving it to your database. Show us your code that you use to perform the post if you need to know where to put the code from this answer. – Ben Felda May 11 '14 at 18:13
    
Oh It is just an example here.. My code is a very different story. But I ask about basical principles like AJAX. How to update DOM after sending data to the server without page reloading. I have many places in my web site where I have to go this way. Yes I am saving data in my database MongoDB using NodeJS. – Ivan May 11 '14 at 18:31
    
But maybe everything depends on situation. – Ivan May 11 '14 at 18:32
up vote 0 down vote

I'm assuming that you posted the data to the server and db using a post request (i.e. $http.post(url, data)).

In Angular, all Ajax calls have a a promise to the success method, therefore in the success method, do a get request to the server to retrieve your data i.e.:

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

On the Server side, your node server should be listening for a get request to the above get url, and then it should use the callback to query the database for the accounts: 

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

Hope that helps!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.