在Angular中创建一个新对象

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);
        }
        );
    }  


}

});

- Andres Quintero

---

你能否提供一段带有HTML标记的代码示例，这样我可以更容易地指导你。 - Ajay Narain Mathur

Answer 1

一些基础知识和简化。

当你将一个对象推入数组时，它不会复制该对象。它是对该对象的引用。这是理解 javascript 的关键概念，也是许多与 angular 工作有关的基础。

在将对象推入数组后编辑同一个对象将同时编辑两个实例，因为它们都是对同一对象的引用。这可能是您的 "内存" 问题。

我们可以使用 angular.copy() 来帮助解决这个问题。

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

---

现在 Angular 中另一个非常有用的部分是 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()

- charlietfl

Answer 2

尝试在您的代码中删除此行。 usuario=new Object();

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

- Ganesh Hegde