Angular: how to save edited values?

Question

here is my plnkr http://plnkr.co/edit/0W1SZll1BOK5uuEtdycy?p=preview

im trying to save edited values from my edit contact modal.

here is a edit method that takes current value from object:

$scope.edit = function(terminal) {
$scope.name = terminal.name;
$scope.last = terminal.last;
$scope.age = terminal.age;
}

i read about angular copy, there is anything else? any one can help me please ill glat to learn how to do that

score 2 · Answer 1 · answered Apr 15 '17 at 18:59

2

Use angular.copy when assigning value of object or array to another variable and that object value should not be changed.

Without deep copy or using angular.copy, changing value of property or adding any new property update all object referencing that same object. Your JS will look like this:

$scope.edit = function(terminal) {
    $scope.name = angular.copy(terminal.name);
    $scope.last = angular.copy(terminal.last);
    $scope.age = angular.copy(terminal.age);
    }

answered Apr 15 '17 at 18:59

haMzox

2,073
1
12
25

thank you hamza, have a question: im saving the data to an database with php, i need new function to save the editing values to? or the copy method do that automaticly? – torresito Apr 15 '17 at 20:12
1

Put those values in some extra javascript variables using same angular.copy, not in some extra $scope variable since, $scope tell us what values are going to get bind with our view. – haMzox Apr 16 '17 at 05:58

score 1 · Answer 2 · answered Apr 15 '17 at 19:27

You need to pass the index of the row that you are going to edit. pass the index when you click on edit button.

Change in script.js

$scope.edit = function(terminal,index) {

    $scope.name = terminal.name;
    $scope.last = terminal.last;
    $scope.age = terminal.age;
    $scope.edit_index = index

 }


$scope.saveEdit =function(){
    index = $scope.edit_index
    $scope.terminals[index].name = $scope.name;

  }

Change in index.html

<td> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModalLong" ng-click="edit(terminal,$index)">Edit</button>

<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="saveEdit()">Save</button>

http://plnkr.co/edit/GpVB2dUiHCY6NslQDuBe?p=preview

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

You are creating a lot of extra manual work by not using one object in ng-model in the first place instead of using individual scope properties.

There is a golden rule also that if you don't have a dot in ng-model you are doing it wrong

Do something like:

<input ng-model="terminal.name">
<input ng-model="terminal.age">

Then work along the following lines:

$scope.edit = function(terminal) {
    // store reference to terminal being edited
    $scope.currentTerminal = terminal;
    // make a copy so live one is not affected -- will be used in form
    $scope.terminal = angular.copy(terminal);
}

$scope.save = function(){
  // update stored original with changes
  angular.extend($scope.currentTerminal,  $scope.terminal);
  // reset terminal used in form
  $scope.terminal ={};
}

I would strongly suggest you get rid of jQuery and bootstrap.js and use angular-ui-bootstrap insted

edited May 23 '17 at 10:31

Community

1
1

answered Apr 15 '17 at 19:42

charlietfl

170,828
13
121
150

thank you charlietfl, have a question: im saving the data to an database with php, i need new function to save the editing values to? or the extend method do that automaticly? – torresito Apr 15 '17 at 20:15
1

all the more reason to use one object...very simple to stick it into a `$http` and only update the view version on success – charlietfl Apr 15 '17 at 20:31
hi charlietfl, tried to do ngmodel with dot like u sed, but then when i click the edit button and after that the add button, there is values on the add form input – torresito Apr 17 '17 at 16:37

Angular: how to save edited values?

3 Answers3