以角度

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

一些基本原理和简化。

  

当您将对象推送到数组时，它不会复制该数组   object..it是对该对象的引用。这是一个在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()

Answer 2

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

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