AngularJS - Dynamic forms inside arrays

Question

So, I have here the SSCCE. Essentially, I have a dynamic array of people like so:

  $scope.users = [
    {
      name: 'James',
      data: []
    },
    {
      name: 'Bob',
      data: []
    },
    {
      name: 'Walter',
      data: []
    }
  ];

I have forms that those people need to fill out. Those come in small, simple directives. James has to fill both directive's form, Bob has to fill out one, and Walter has fill out one (but it's the one Bob didn't fill out).

Those forms come in object form like $scope.basicDataFormData and $scope.styleRequestFormData and at the main level, we attach it like so:

  $scope.data = {
    basic_data: $scope.basicDataFormData,
    style_request: $scope.styleRequestFormData
  }

At $scope.menu.currentIndex, we govern what user page to show and it is either reset to 0 or increases when you hit Next user.

So, each user's data object, from $scope.users, is based on what the current $scope.data is, right? Wrong.

https://plnkr.co/edit/zGVPViVTkepGB1ZO3PbU?p=preview

As you can see, it doesn't work exactly how it's suppose to. From the example, the form data gets copied over to the next one. And now, both user 1 and user 2 are getting the same exact data when menu.currentIndex is obviously only dictating 1 when next user gets pressed.

Can someone help me out here?

The way it's suppose to work is that all of those forms should only be written to the current user's data object that menu.currentIndex is on. That way, each form is persistant to that user's form view. James should have two objects inside his data while Bob and Walter with only 1.

is this fixed or something? i cant reproduce the issue?

Searching
– Searching

2017-03-16 03:34:02 +00:00
Commented Mar 16, 2017 at 3:34 — Searching
– Searching, Commented Mar 16, 2017 at 3:34

Wang Liang · Accepted Answer · 2019-11-20 13:57:09Z

1

In the initialize function you are assigning one object to another like so:

function initialize() {
    $scope.data.basic_data = $scope.basicDataFormData;
    $scope.users[$scope.menu.currentIndex].data = $scope.data;
}

This is not correct, because it just points them to the same place in memory. Instead, you want to clone the object. See https://docs.angularjs.org/api/ng/function/angular.copy.

The function should be:

function initialize() {
    $scope.data.basic_data = angular.copy($scope.basicDataFormData);
    $scope.users[$scope.menu.currentIndex].data = angular.copy($scope.data);
}

edited Nov 20, 2019 at 13:57

Wang Liang

4,4527 gold badges26 silver badges50 bronze badges

answered Mar 15, 2017 at 23:42

Hadas Zeilberger

7613 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

test Over a year ago

I'd rather not mix jQuery with Angular at all and looking to find a solution in Angular.

Hadas Zeilberger Over a year ago

Okay, well then use angular.copy docs.angularjs.org/api/ng/function/angular.copy

Hadas Zeilberger Over a year ago

Either way, the point is you want to manually copy the object onto the other object instead of assigning it with the = operator

test Over a year ago

That makes sense. Thank you.

Amir Suhail Over a year ago

Try angular.copy in this way: $scope.data.basic_data = angular.copy($scope.basicDataFormData);

|

Collectives™ on Stack Overflow

AngularJS - Dynamic forms inside arrays

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related