AngularJS - 将$ scope.data重置为原始值

Question

我在这里创造了一个小提琴:http://jsfiddle.net/nicktest2222/W4VaA/

我只是希望能够点击重置按钮并将原始值恢复原状.有谁知道这样做的最佳方法？

提前致谢

function TodoCtrl($scope) {
  $scope.data = [
   {text:'learn angular', done:true},
   {text:'build an angular app', done:false}];

  $scope.orig = [$scope.data];

  $scope.reset = function() {
    $scope.data = $scope.orig;
  };

}

Answer 1

问题出在JS克隆机制中.您需要做的就是创建模型的深层副本:

function TodoCtrl($scope) {
    $scope.data = [
        {text:'learn angular', done:true},
        {text:'build an angular app', done:false}
    ];

    $scope.orig = angular.copy($scope.data);

    $scope.reset = function() {
        $scope.data = angular.copy($scope.orig);
    };
}

这是更新的小提琴.

Answer 2

最简单的选择是使用angular.copy克隆原始数据,然后再次重置数据$scope.

function TodoCtrl($scope) {
  $scope.data = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}
  ];

  var originalData = angular.copy($scope.data);
  $scope.reset = function() {
     angular.copy(originalData, $scope.data); 
  };
}

编辑:angular.copy提供时,在将源值复制到目标对象或数组之前,两个值将清空目标对象或数组.在处理子范围时,这非常有用.

Answer 3

madhead最初工作,但之后数据指向$ scope.orig并且重置将不再起作用.需要在重置时进行复制才能使其正常工作.

Editted madhead的作品:http: //jsfiddle.net/W4VaA/2/

function TodoCtrl($scope) {
  $scope.data = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}
  ];

  $scope.orig = angular.copy($scope.data);

  $scope.reset = function() {
     $scope.data = angular.copy($scope.orig);
  };
}