Angular edit the values of an object without changing the "original"

Asked

Viewed 3,964 times

2

I have a ng-repeat in Angular whose value of each iteration is an object. By clicking a button referring to the row of the table where this object is used, a form for editing it is opened, and, with this data, fill this form.

Thus:

angular.module('app', [])
.controller('Test', function ($scope) {

  $scope.users = [
    {name: 'Wallace', email: '[email protected]'},
    {name: 'Wayne', email: '[email protected]'}
  ];
  $scope.edit = function (user) {

    $scope.user = user;
  }
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>
<body>
<div ng-controller="Test" class="container"> 
        <table class='table'>
            <tr ng-repeat="user in users">
                <td>Name: {{ user.name }}</td>
                <td>E-mail: {{ user.email }}</td>
                <td><button class="btn btn-primary" ng-click="edit(user)">editar</button></td>
            </tr>
        </table>
        <form ng-if="user">
            <input type="text" ng-model="user.name" class="form-control" />
            <input type="email" ng-model="user.email" class="form-control" />
           <button type="submit" ng-click="save()" ng-click="save()" class="btn btn-primary">Salvar</button>
            
        </form>
    </div>
</body>
</html>

However, I would like the value of the selected object, when edited in the form, not to immediately update the table values, but only by clicking on the "save".

How can I "break" this reference temporarily in Angular and then update it again?

angularjs

2 answers

3


You can do it like this:

Use the angular.copy() within the function edit which returns only a copy of the object, and a second argument in this which would be the index of the users array corresponding to the modified object. Use this index later to update only the part that has been modified: 

angular.module('app', []).controller('Test', function($scope) {
    var index;
    $scope.users = [{
      name: 'Wallace',
      email: '[email protected]'
    }, {
      name: 'Wayne',
      email: '[email protected]'
    }];
    $scope.edit = function(user, i) {
      $scope.update = angular.copy(user);
      index = i;
    }
    $scope.save = function() {
      $scope.users[index] = $scope.update; // captura o objeto modificado e atualiza no original
      $scope.update = ""; // reseta o update
    }
  });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Test" class="container">
  <table class='table'>
    <tr ng-repeat="user in users">
      <td>Name: {{ user.name }}</td>
      <td>E-mail: {{ user.email }}</td>
      <td>
        <button class="btn btn-primary" ng-click="edit(user, $index)">editar</button>
      </td>
    </tr>
  </table>
  <form ng-if="update">
    <input type="text" ng-model="update.name" class="form-control" />
    <input type="email" ng-model="update.email" class="form-control" />
    <button type="submit" ng-click="save()" ng-submit="save()" class="btn btn-primary">Salvar</button>
  </form>
</div>

1

In his job edit create a new object by copying the user with the function create, as follows:

var user_orginal = { a : 1 };
var user_clone = Object.create(foo);
user_orginal.a; // 1
user_clone.a; // 1
user_orginal.a = 2;
user_clone.a; // 2 - prototype changed
user_clone.a = 3;
user_orginal.a; // Still 2, since setting bar.a makes it an "own" property

Then, in save, assign user_clone to the $scope.user.

Source: SO - en - How do I correctly clone a javascript Object

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.