javascript - 为编辑表单创建重置功能

Question

我有一个表单，用户可以在其中修改数据，然后点击发送将其存储在服务器上。我还有这个重置按钮，我希望能够重置用户所做的所有更改。

这是我的 Controller :

controller: function($scope, $timeout, project){
  var initProject = project;
  $scope.project = project;

  $scope.reset = function(){
    console.log(initProject) //Same value as $scope.project after modifying $scope. Why?
    $scope.project = initProject;
  };

我的想法是将初始解析值(项目)存储在变量中。然后将 $scope 重置为该值。但这不起作用。当用户修改 $scope.project 时，initProject 也会以某种方式被修改。

有什么想法吗？有更好的方法吗？

Answer 1

您必须复制项目；否则，project 和 initProject 实际上是同一个对象，通过不同的变量访问。

您可以使用angular.copy为此:

angular.copy
- function in module ng
Creates a deep copy of source, which should be an object or an array.

<小时/>

改变一下

var initProject = project;
...
$scope.project = initProject;

至

var initProject = angular.copy(project);
...
$scope.project = angular.copy(initProject);

<小时/>

这是a JSFiddle example .