以角度创建新对象

Question

我是编程新手，我遇到了内存概念问题。
我有一个用户页面通过ng-repeat显示数据库中的用户，每个用户都有一个编辑或删除选项。 我也在该页面上有一个按钮来添加一个新用户。我的问题是，当我编辑用户时，该用户的信息仍保留在内存中。因此;当我点击新的时候，这些字段会填入我编辑的最新用户。 下面是我的代码，当我点击添加一个新用户时，我怎样才能让它创建一个新对象。

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

一些基本原理和简化。

当您将对象推入数组时，它不会复制 对象..它是对该对象的引用。这是一个关键的概念在javascript理解和根本，以大量具有角

工作，按向阵列，因为它们是完全相同的对象引用都将编辑两个实例后编辑同一个对象。这大概是你的“内存”的问题。

我们可以使用angular.copy()来帮助那里。

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

---

现在的角度ng-model另一个非常有用的部分是你不必设置对象的所有属性为ng-model工作。如果一个物业不存在，ng-model将创建它。

这意味着我们现在可以简单地重置usario到一个空对象：

usario = {}; 

然后在表格编辑该对象并完成时和形式验证推新副本的阵列，并再次重置

---

现在如果你想编辑你没有现有用户的每个属性的所有值手动复制到usario我们可以用angular.extend()做到这一点对我们来说

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

现在使用usuarioEditar的所有属性覆盖usario的属性，或者如果它们不在那里，则创建它们。

---

同样使用$http时发送usario我们可以把整个对象

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

正如你所看到的，这将显著精简所有的对象处理，降低了大量的时间和代码。

希望这回答大家的一些问题，并帮助你前进

---

参考

angular.copy()

angular.extend()

Answer 2

尝试在代码中删除此行。 usuario = new Object（）;

你不需要创建另一个对象。