0

I have an application wherein when i click on edit button it pops up a bootstrap modal where I can edit the data. But the problem is when i change any data in the bootstrap modal, the data in the list also gets changed. Strange thing here is both the scope variable for modal edit data and the scope varaible associated with the data in the page is different.

This issue can be visualized using the below URL:

http://angularjs.mostlikers.com/curd-operation/

Click on the Edit button and try to change the modal data, it also changes the data in the table which should not be the ideal case until submit is clicked.

Any help would be appreciated, since stuck for a long time.

Improve this question
3
  • For debugging help,post the relevant code in your question, not somewhere on an external site. Commented Apr 29, 2018 at 7:16
  • 1
    You should either clone complete object or pass item's (primitives - strings, numbers, boolean) properties one by one as primitive values into popup. objects are passed by reference in JavaScript regardless of variable names. Commented Apr 29, 2018 at 7:20
  • Thank you @skyboyer for your suggestion. It worked like a charm. Commented Apr 30, 2018 at 4:50

1 Answer 1

Reset to default
1

You should clone the row object when sending it into modal, You can use lodash.js library for that like below

//When binding row to the modal's scope you should do this,
$scope.user = _.merge({},row)

Assuming that $scope is the modal's scope and row variable in the object for that row which is to be edited.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.