current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm building my first application with AngularJS, but i have run into a little problem.

I got a table where i render every user in users array like below:

<table class="table table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
                <th>Company</th>
                <th>Active</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users">
                <td>{[{ user.id }]}</td>
                <td>{[{ user.firstname }]}</td>
                <td>{[{ user.lastname }]}</td>
                <td>{[{ user.email }]}</td>
                <td>{[{ user.company }]}</td>
                <td>Yes</td>
                <td><a href="#modalUpdateUser" ng-click="getUser(user)" data-toggle="modal"><i class="icon-pencil"></i></a></td>
            </tr>
        </tbody>
    </table>

This works perfectly fine, as i have in my controller.js an array $scope.users that gets filled with the users.

The problem is the last Cell with the the ng-click="getUser(user)", which opens a ModalBox and fills the inputs with the existing users data.

$scope.getUser = function(user) {
    $scope.user = user;
};

In the ModalBox all the input fields has ng-model="user.firstname" etc. So this ofcourse Binds the input fields in the ModalBox to the user in my table, and instantly changes the data in the table when i change it in the ModalBox.

But what i want is to edit the data in the ModalBox and then only change the user in the table if i press "Save" in the ModalBox.

So my question is, can i take user object from the ng-repeat in my table and hand it over to my $scope.user which is bound to my ModalBox inputs without keeping them all bound together?

Thanks in advance,

  • Rasmus Knudsen

Solution The solution was to use angular.Copy to transfer an object without the binding reference. Working example here: http://docs.angularjs.org/guide/forms

share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

I'm not really sure suggested solution @MaxWillmo will work, objects are copied by reference & will get updated.. as it's changed in the popup?

I think you might want to do 'angular.copy()' & make a copy of the selected user, then replace the user object in the array after the editing is done.

-Bhaskara

http://blog.liftoffllc.in/search/label/angularjs

share|improve this answer
 
Thank you very much, the Copy was exactly what i was looking for. I also found a working example with a form here: docs.angularjs.org/guide/forms –  PeterPanen Jun 3 '13 at 7:41
 
I'm glad it was helpful. –  Bhaskara Kempaiah Jun 3 '13 at 16:09
add comment
up vote 0 down vote

You could create a $scope.selectedUser object and a $scope.selectedIndex property in the getUser() function and past the index instead:

getUser(index){
    $scope.selectedIndex = index;
    $scope.selectedUser = $scope.users[index];
}

And then use $scope.selectedUserto populate the modal. Once the user clicked OK you can replace the user in the array using the index.

saveUser(){
    $scope.users[$scope.selectedIndex] = $scope.selectedUser;
}
share|improve this answer
 
Thanks for the answer, though i already tried this and Angular binds the objects references anyhow. –  PeterPanen Jun 3 '13 at 8:38
 
You could mock the selectedUser as a new object by copying over the properties you want to a new object on the scope. Then when you are done you could copy them back over. –  MaxWillmo Jun 3 '13 at 8:57
add comment

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.