Create a new object in angular

Question

I am new to programming and I have a problem with the concept of memory.
I have a user page that displays users in the database via ng-repeat, and each user has the ability to edit or delete. I also have a button on this page to add a new user. My problem is that when I edit a user, the information for that user remains in memory. Consequently; when I click new, the fields are populated by the last user I edited. Below is my code, how can I get it to create a new object when I click to add a new user.

var app = angular.module("dico", []); app.service('srvUsuarios', function($http){ var usuarios = []; var usuario = {"id":"","fullname":"","username":"","password":"", "role_id":"","email":""}; this.getusuarios = function(){ return usuarios; }; this.getusuario = function(){ return usuario; }; this.nuevo = function(){ usuario=new Object(); usuario.id = ""; usuario.fullname = ""; usuario.username = ""; usuario.password = ""; usuario.role_id = ""; usuario.email = ""; }; this.editar = function(usuarioEditar){ //usuario=new Object(); //console.log(usuario); usuario.id = usuarioEditar.id; usuario.fullname = usuarioEditar.fullname; usuario.username = usuarioEditar.username; usuario.password = usuarioEditar.password; usuario.role_descripcion = usuarioEditar.role_descripcion; usuario.email = usuarioEditar.email; console.log(usuario); }; }); app.controller("usuarios", function($scope,$http, srvUsuarios){ $scope.usuarios = srvUsuarios.getusuarios(); console.log($scope.usuarios); $scope.usuario = srvUsuarios.getusuario(); console.log($scope.usuario); $http.get(ROOT+'usuarios/listar').then( function(response){ $scope.usuarios = response.data; $scope.usuarios.push($scope.usuario); console.log($scope.usuarios); }, function errorCallback(response){ console.log("Error", response); }); $scope.filaLimite = 100; $scope.sortColumn = "name"; $scope.reverseSort = false; $scope.sortData = function(column){ $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false; $scope.sortColumn = column; } $scope.getSortClass = function(column){ if($scope.sortColumn == column){ return $scope.reverseSort ? "arrow-down" : "arrow-up"; } return ""; } $scope.nuevo = function(){ srvUsuarios.nuevo(); } $scope.editar = function(usuario){ srvUsuarios.editar(usuario); } $scope.eliminar = function(usuario){ var index = $scope.usuarios.indexOf(usuario); if (index > -1){ $http.post(ROOT+'/usuarios/eliminar',{id:usuario.id}).then( function(response){ if (response.data="true"){ $scope.usuarios.splice(index, 1); } },function errorCallback(response){ console.log("Error", response); } ); } } $scope.myVar = false; $scope.toggle = function() { $scope.myVar = !$scope.myVar; }; $scope.show = function(id){ if(id == ""){ $scope.mostrar = "0"; console.log($scope.mostrar) } else{ $scope.mostrar = "1"; } } }); app.controller("usuario", function($scope, $http, srvUsuarios){ $scope.usuario = srvUsuarios.getusuario(); $scope.usuarios = srvUsuarios.getusuarios(); $scope.accion = function(id){ if(id == ""){ return "Nuevo"; } else{ return "Editar"; } } $scope.guardar = function(usuario){ if(usuario.id == ""){ $http.post(ROOT+'usuarios/insertar',{ 'fullname':usuario.fullname, 'username':usuario.username, 'email':usuario.email}) .then(function(response){ console.log(response); location.reload(true); },function errorCallback(response){ console.log("Error", response); } ); }else{ console.clear(); console.log($scope.usuarios); $http.post(ROOT+'usuarios/editar',{'id':usuario.id, 'fullname':usuario.fullname, 'email':usuario.email}) .then(function(response){ console.log( usuario.id); location.reload(true); },function errorCallback(response){ console.log($scope.usuarios); console.log("Error", response.data); } ); } } }); 

Answer 1

Some basics and simplifications.

When you click an object on an array, it does not make a copy of object..it is a reference to this object. This is a critical concept for understanding in javascript and fundamental to working with angular

Editing the same object after clicking it into the array will edit both instances, since they are links to the same object. This is probably your memory problem.

We can use angular.copy() to help there.

 usuarios.push(angular.copy(usario)); 

---

Now another very useful part of angular ng-model is that you do not need to set all object properties for ng-model . If the property does not exist, ng-model will create it.

This means that now we can simply reset usario with an empty object:

 usario = {}; 

then edit this object in the form and when it is completed and confirmed in the form, click on a new copy of the array and reset again

---

Now, if you want to edit an existing user, you do not need to manually copy all the values ​​of each property in usario , we can use angular.extend() to do this

 this.editar = function(usuarioEditar){ angular.extend(usario, usuarioEditar); } 

Now all usuarioEditar properties usuarioEditar used to overwrite or create usario properties if they were not there.

---

Similarly, when using $http to send usario we can send the whole object

 if(usuario.id == ""){ var postData = angular.copy(usario) delete data.id; $http.post(ROOT+'usuarios/insertar', postData ).then(... 

As you can see, this will greatly simplify all object processing and reduce a lot of time and code.

I hope this answers some of your questions and helps you move forward.

---

References

angular.copy ()

angular.extend ()

Answer 2

Try removing this line in your code. usuario = new Object ();

You do not need to create another object.