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

时间:2013-07-09 22:16:36

标签: javascript angularjs

我在这里创造了一个小提琴: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;
  };

}

3 个答案:

答案 0 :(得分:45)

The problem is in JS clone mechanics。您需要做的就是创建模型的深层副本:

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

Here is the updated fiddle.

答案 1 :(得分:14)

最简单的选择是使用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提供的两个值将在将源值复制到目标对象或数组之前清空目标对象或数组。在处理子范围时,这非常有用。

答案 2 :(得分:7)

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