AngularJS - Reset $scope.data to original values

Question

I've created a fiddle here: http://jsfiddle.net/nicktest2222/W4VaA/

I just want to be able to hit the reset button and put my original values back. Does anyone know the best way to go about doing this?

Thanks in advance

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

}

score 48 · Accepted Answer · edited May 23 '17 at 11:53

48

The problem is in JS clone mechanics. All you need to do is to create a deep copy of your model:

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.

edited May 23 '17 at 11:53

Community

1
1

answered Jul 09 '13 at 22:33

madhead

31,729
16
153
201

2

My god....after 2.5 hours of headache, I found this brilliant solution. I went to do it the dumb way: Find the index of the object that was modified from the array and get a copy of the original object. This way is much shorter and sweeter! Thank you so much – Mark Feb 21 '14 at 08:00
1

I tried similar way but it dint work in case of dropdowns, It was resetting the dropdown instead of going back to the ng-selected value, $route.reload() did the trick for me. – Himalay Majumdar Aug 27 '14 at 19:48
1

this saved my a$$ – Ren44 Jul 06 '18 at 13:23

rtcherry · Answer 2 · 2013-07-09T22:38:34.483

14

The simplest option is to use angular.copy to clone the original data, and then again to reset the data in $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); 
  };
}

Edit: angular.copy when provided two values will empty the target object or array before copying the source values in to it. This can be really useful when dealing with child scopes.

edited Jul 09 '13 at 22:38

answered Jul 09 '13 at 22:31

rtcherry

4,840
22
27

2

This is the only of the 3 answers that works when using 2 way binding. (for ex, on a modal dialog using resolve: { data : function () { return $scope.dataFromParentScope } }. I see what you mean by it being best when dealing with child scopes. – parliament Jan 27 '14 at 15:34
1

I tried similar way but it dint work in case of dropdowns, It was resetting the dropdown instead of going back to the ng-selected value, $route.reload() did the trick for me. It would be great if you can come up with a fiddle to prove it working for drop downs. – Himalay Majumdar Aug 27 '14 at 19:48

score 7 · Answer 3 · answered Aug 22 '13 at 16:36

madhead works initially, but afterwards the data is pointing to $scope.orig and reset would not work anymore. Would need to do a copy in the reset for it to work also.

Editted madhead's work: 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);
  };
}

score 0 · Answer 4 · answered Aug 17 '21 at 21:37

Thank God for new angular versions. but for those like me, that still have to maintain old angular js code you have to write some doggy code like this.

$scope.[moduleName] = { [variableName]: '' };

$scope.[formName].[variableName].$touched = false;
$scope.[formName].[variableName].$$untouched= false;

you can also write a function to handle lots of input elements like this. but it used jquery and bootstrap 3

HTML

<ng-form class="form" name="formName" novalidate>
    <div class="row">
        <div class="col-md-6"">
            <div class="form-group">
                <label class="control-label">
                    input1 <span class="symbol required"></span>
                </label>
                <select id="input1" name="input1" class="form-control" required ng-model="model.input1">
                    <option value="">Select Optionn</option>
                    <option ng-repeat="option in options" value="{{option.id}}">{{option.Description}}</option>
                </select>
            </div>
        </div>
    </div>
</ng-form>

Controller.js

$scope.resetForm = function () {
    $scope.model = { input1: '' }; // reset form value
        let form = $(".form"),
            frmElm = $scope.formName; // referees to name="" for ng-form element

        form.find('.form-control').each(function (item) {
            let element = $(this),
            id = element.attr("id");

        if (frmElm[id]) {
            var scopeElement = frmElm[id];
            scopeElement.$touched = false;
            scopeElement.$untouched = false;
        }
    })
};

AngularJS - Reset $scope.data to original values

4 Answers4