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

Question

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

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

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

So:

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><linkrel="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>

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

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

angularjs

asked by anonymous 05.08.2016 / 22:57

2 answers

1

In your function edit create a new object by copying the user with the create function, 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 the save function, assign the user_clone to $scope.user .

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

05.08.2016 / 23:06

Show result of a query in html - PHP + CodeIgniter. Extract from a date in the format string the data separately

score 3 · Accepted Answer

You can do this:

Use angular.copy() within the edit function that returns only one copy of the object, and a second argument in this would be the index of the users array that corresponds to the modified object. I 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><divng-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>