Rubén Martín Rubén Martín - 1 year ago 40
Javascript Question

AngularJS edit and save values inside ng-repeat

I'm working on my first angular app and i dont know the best way to handle this problem.

I have a long hierarchical json becouse the tables of the database are like a pyramid, looks similar to this:
enter image description here

I have the view represented pretty well using ng-repeat, I want to be able to edit the last rows of the last table which correspond with last level of JSON.

To do this I have implemented a edit modal that works fine, it saves and updates the database perfectly, the problem is that to see the updated value i have to refresh the page losing scroll position and collapsing accordions which is very bad.

Images of accordions:

enter image description here

When i click edit icon a promise stores in $scope.objEdit = {}; the object and launches the modal, which is linked to this object by ng-model.

So I think that the next step is that when modal is closed, i have to override the old object placed in the $scope variable that contains the entire json for the edited one, but im not sure how to do it.

I would appreciate your help to learn the standard way to do this, thx mates.

I Just solved it, I used a similar procedure to the oen that @AnikIslamAbhi sugested, in the fiddle that @Harshad shared in the comments is solved, but i have a much more dificult json to handle, i had to go with things like those to get the index of all levels of the json:

$scope.positionEvaluacion = $scope.dataEvaluacion.indexOf(args.levelOne);
$scope.positionAsignaturaevaluacion = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion.indexOf(args.levelTwo);
$scope.positionTarea = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea.indexOf(args.levelThree);

And after this override this object with the edited one:

$scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea[$scope.positionTarea] = $scope.objEdit;


You can try this procedure

  1. Pass the selected object on edit click from UI to Controller.
  2. Clone it and pass that object to modal.
  3. OnModal close pass the modal object back to the UI.
  4. Copy the values of modal object to the previous selected object

Like this

for(var i in modalObj){