Reset a model with angular.js

Question

I\'m simply try to reset values like this :

$scope.initial = [
    {
        data1: 10,
        data2: 20
    }            
];


$scope.datas= $scope.initial         


        

Answer 1

Consider the following buttons

• Edit
• Save
• Cancel

When user clicks edit and changes data and then uses the cancel button to get the old data, here is how you could implement this.

HTML

<div>
    <button data-ng-click="edit()" data-ng-show="!editing">Edit</button>
    <button data-ng-click="save()" data-ng-show="editing">Save</button>
    <button data-ng-click="cancel()" data-ng-show="editing">Cancel</button>
</div>

AngularJs

$scope.edit = function () {
    $scope.editing = true;
    $scope.copy = angular.copy($scope.data);
};

$scope.cancel = function () {
    $scope.editing = false;
    $scope.data = $scope.copy;
};

References

• angular.copy
• Orignal Post

Answer 2

I have used as you all said above by maintaining a back up but while using it I faced one more problem.
I thought if i post it here it would be helpful to others

I have profile section code as below:

var profileBackup ={};
$scope.profileContinue = function()
{
  profileBackup = angular.copy($scope.userData.profile); 
//  profileBackup = $scope.userData.profile; 
//other code
}

$scope.profileCancel = function()
{
$scope.userData.profile = profileBackup;
}

But I was surprised to see that even non-scope variable profileBackup was updating when the model changes (I guess reference is returned in this case)

Then I changed my code like this:

$scope.profileContinue = function()
{
  profileBackup = angular.toJson($scope.userData.profile); 
//  profileBackup = $scope.userData.profile; 
//other code
}

$scope.profileCancel = function()
{
$scope.userData.profile = angular.fromJson(profileBackup);
}

please forgive me if it doesn't make any sense..

Answer 3

I love Yasser's comment: clear and concise.

I definitely prefer copying the value when starting to edit, and then just replacing the reference on cancel/save.

I prefer binding on a local copy, and not the original data, and then changing the final data only on save. This prevent all sorts of bugs later, and encapsulates the edit behavior.

The final version would be:

function initValue() {
    $scope.bound = angular.copy($scope.data);
}

function setValue() {
    $scope.data = $scope.bound;
}

$scope.edit = function () {
    $scope.editing = true;
    initValue();
};

$scope.cancel = function () {
    $scope.editing = false;
    initValue();
};

$scope.save= function () {
    $scope.editing = false;
    setValue();
};

Answer 4

This is really a question about JavaScript (so I added the "javascript" tag). When a JavaScript object (such as array $scope.initial) is assigned to a variable, it is assigned by reference, not by copy. So, this statement

$scope.datas= $scope.initial;

results in $scope.datas pointing to the $scope.initial object. Any changes that are made to $scope.datas or $scope.initial both affect the same (single) object. Since ng-model is used to data-bind object elements data1 and data2, any changes to the text inputs will change the data1 and data2 elements of the object that $scope.datas references -- i.e., $scope.initial. To see this in action, add the following to your fiddle's HTML:

<p>{{initial}}</p>

When you change the values in the text boxes, you'll see that $scope.initial is also changing.

@Max provided a partial answer: use angular.copy() in the reset function. However, you'll also have to use angular.copy() in the initial assignment too:

 $scope.datas = angular.copy($scope.initial);

---

Update:

As @EpokK shows in his answer, an alternate solution is

angular.copy($scope.initial, $scope.datas);

As @bekite mentions in his answer, @EpokK's solution does not create another object.

The full code

angular.module('app', []).controller('MyCtrl', function($scope) {
  $scope.initial = [{
    data1: 10,
    data2: 20
  }];
  $scope.datas = angular.copy($scope.initial);
  $scope.reset = function () {
    $scope.datas = angular.copy($scope.initial);
    // or
    // angular.copy($scope.initial, $scope.datas);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="data in datas">
    <input type="text" ng-model="data.data1" />
    <input type="text" ng-model="data.data2" />
  </div> 
  <a ng-click="reset()">Reset to initial value</a>
  or
  <hr />
  <p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>{{initial}}
</div>

fiddle

Answer 5

@Mark Rajcok: Don't get me wrong, but I think that

angular.copy($scope.initial, $scope.datas);

is not an alternate syntax for

$scope.datas = angular.copy($scope.initial);

The way i understand it:

$scope.datas = angular.copy($scope.initial);

Creates a copy of $scope.initial and assigns the reference to $scope.datas.

angular.copy($scope.initial, $scope.datas);

Updates $scope.datas values with $scope.initial values

See the angularjs docs ( http://docs.angularjs.org/api/angular.copy ),and there the sektion on the Return statement

Returns The copy or updated destination, if destination was specified.

Answer 6

Working syntax :

$scope.reset = function () {
    angular.copy($scope.initial, $scope.datas);
};

API Reference : angular.copy(source[, destination]);