以角度創建新對象

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（）;

你不需要創建另一個對象。