Change entire object in ng-repeat function AngularJs

Question

Hello I have a questions on ng-repeat on Angularand function for change value. I have this ng-repeat that cycling a ObjectArray and have a button for reset value.

<div ng-repeat="element in data.elements">
   <button ng-click="reset(element)" >reset</button>
</div>

Where data.elements is array of objects example:

[{id:1, name:"element1"},{id:2, name : "element2"}];

In my Controller I set function Reset in $scope that should do a copy of object passed to an default object:

$scope.reset = function(el){
  $scope.defaultObject = {id:500, name:"default"};
  el = angular.copy($scope.defaultObject);
}

But doesn't work, but if I do:

$scope.reset = function(el){
      $scope.defaultObject = {id:500, name:"default"};
      el.name = $scope.defaultObject.name;
    }

It work. So I would like that when I do (in this example):

el = angular.copy($scope.defaultObject);

have the object el equals to object $scope.defaultObject my question is, Can i copy entire object without cycling all properties?

Possible duplicate of [How do I correctly clone a JavaScript object?](http://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object) — Matt Way, Sep 21 '16 at 10:55
I see this link, but "Can I copy entire object without cycling all properties?" in this post seems that do a cycle of property of object and assign this to object. — LorenzoBerti, Sep 21 '16 at 10:59
You're passing an object to the reset function, then you're overwriting this object. That's it, nothing happens because it won't affect the original object, which is in the `data.elements` array. You need to use a different approach. Track the element by its index (`ng-repeat="$index,element in data.elements`), then amend `data.elements[$index]`. — Jeremy Thille, Sep 21 '16 at 11:01
`angular.copy(el, $scope.defaultObject)` ? https://docs.angularjs.org/api/ng/function/angular.copy — Walfrat, Sep 21 '16 at 11:20
thankyou jeremy, in your answer can you explain even why if I set property of element it work? thankyou — LorenzoBerti, Sep 21 '16 at 12:06

score 0 · Answer 1 · answered Sep 21 '16 at 11:04

0

are you saying, your updated object does not reflect on the UI? you can try forcing the scope update by running $scope.$apply() after you have assigned the object.

answered Sep 21 '16 at 11:04

Nikhil Madhamshettiwar

299
3
5

No, I can't call $scope.$apply because it force a digest, and if the last not is finished, make error. – LorenzoBerti Sep 21 '16 at 11:06
@LorenzoBerti, to avoid an error you can use $timeout(() => $scope.$apply()) . – Marcelo Pereira Rodrigues Jan 09 '20 at 23:36

score 0 · Accepted Answer · answered Sep 21 '16 at 19:44

0

You're passing an object to the reset function, then you're overwriting this object. That's it, nothing happens because it won't affect the original object, which is in the data.elements array.

You need to use a different approach. Track the element by its index :

<div ng-repeat="element in data.elements track by index">
     <button ng-click="reset(index)" >reset</button>
</div>

...then amend data.elements[index]:

$scope.reset = function(index){
  $scope.data.elements[index] = {id:500, name:"default"};
}

answered Sep 21 '16 at 19:44

Jeremy Thille

26,047
12
43
63

Thanks, but can I ask you why if I modify a object property it work? – LorenzoBerti Sep 22 '16 at 06:27
I don't understand the question, what do you mean? – Jeremy Thille Sep 22 '16 at 06:29
That if I do `reset(element);` and in reset function I do: `element.name = "test"`; it change corretly the value. – LorenzoBerti Sep 22 '16 at 06:38
1

Oh yes, it will update the `element` object, just because you pass it to the reset function. But it has no effect on the original element, which is in `data.elements`. All you do is give some object to a function, then modify the object. This doesn't have any other effect whatsoever on the original object, it is a new instance. – Jeremy Thille Sep 22 '16 at 06:46
Thankyou for explain! – LorenzoBerti Sep 22 '16 at 06:53

Change entire object in ng-repeat function AngularJs

2 Answers2