CODEWITHSUNDEEP
javascriptangularjs
Nick
Nick

Reputation: 592

AngularJS - Reset $scope.data to original values

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

}

Upvotes: 21

Views: 48559

Answers (4)

Tlotli Otlotleng
Tlotli Otlotleng

Reputation: 341

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

Upvotes: 0

madhead
madhead

Reputation: 33501

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.

Upvotes: 48

aminh101sj
aminh101sj

Reputation: 114

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

Upvotes: 7

rtcherry
rtcherry

Reputation: 4880

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.

Upvotes: 14

Related Questions