以角度创建一个新对象

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的基础

将数据推送到数组后编辑同一个对象将编辑这两个实例,因为它们都是对完全相同的对象的引用.这可能是你的"记忆"问题.

我们可以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()