AngularJS disable 2 way binding

Question

This actually might be a JavaScript question, but it is happening when I am using AngularJs.

Say I have an array like this:

var players = [
    {
        id: 1,
        name: 'Player 1'
    },
    {
        id: 2,
        name: 'Player 2'
    }
];

and then I have another array like this:

var teams = [
    {
        id: 1,
        name: 'Team 1',
        members: players
    },
    {
        id: 2,
        name: 'Team 2',
        members: players
    }
];

If I decide to add a new property called position to one of the teams:

teams[0].members[0].position = 1;

I don't want it to then update the second team members position. I hope that makes sense.

Here is a codepen to illustrate my issue:

http://codepen.io/r3plica/pen/ZGZXjb?editors=101

That's always going to happen because members on both teams points to the same object! — Dal Hundal
– Dal Hundal, Commented Aug 13, 2015 at 13:13
Data doesn't make sense....you would never be storing the data this way where you have reference to same javascript object — charlietfl
– charlietfl, Commented Aug 13, 2015 at 13:17
Actually you have create the new object in 0'th index only. The result coming from your input. that's all. — Ramesh Rajendran
– Ramesh Rajendran, Commented Aug 13, 2015 at 13:28
It was an example that I put together, in my application it is a sports shopping cart and you assign a player / player number to the garment and then set the quantity of items per player per garment. But the example I posted was easier to explain :) — r3plica
– r3plica, Commented Aug 13, 2015 at 13:29

Juned Lanja · Accepted Answer · 2015-08-13 13:20:54Z

4

Array in java-script are mutable so you need to make copy of player and assign it to teams member property.

Just change your code to :

var teams = [
{
    id: 1,
    name: 'Team 1',
    members: angular.copy(players)
},
{
    id: 2,
    name: 'Team 2',
    members: angular.copy(players)
}

];

for more information see : https://docs.angularjs.org/api/ng/function/angular.copy

answered Aug 13, 2015 at 13:20

Juned Lanja

1,48410 silver badges21 bronze badges

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

4 Comments

r3plica Over a year ago

I was hoping there was a better solution that having to loop through each player and create a new object for each one.

Ramesh Rajendran Over a year ago

How can you achieve this when change the value on text box?

Juned Lanja Over a year ago

@ramesh you mean making copy of object binded to textbox as its model change?

Ramesh Rajendran Over a year ago

Yes, You need to use scope.watch().

cverb · Accepted Answer · 2015-08-13 13:17:45Z

2

The only way (if both teams have the same players) is to use a copy of the array for the second team. Now it's logical the second team gets updated, because both teams point to the same reference of players.

You can use angular.copy for that.

var copyofplayers = [];
angular.copy(players, copyofplayers);

edited Aug 13, 2015 at 13:17

answered Aug 13, 2015 at 13:15

cverb

6436 silver badges20 bronze badges

1 Comment

The Victor Over a year ago

Alternatively if using lodash, you can _.cloneDeep(players)

Shaishab Roy · Accepted Answer · 2015-08-13 15:33:37Z

0

also can use jQuery.extend() like

var teams = [
{
    id: 1,
    name: 'Team 1',
    members: jQuery.extend({}, players)
},
{
    id: 2,
    name: 'Team 2',
    members: jQuery.extend({}, players)
}
];

answered Aug 13, 2015 at 15:33

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

1 Comment

r3plica Over a year ago

Yeah but I don't use jQuery with AngularJs

Collectives™ on Stack Overflow

AngularJS disable 2 way binding

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related