Creating a website with Angularjs involves working with an array of objects:
$scope.fieldsToShow = [
{
"fields": {},
"type": "LOGGED_IN"
},
{
"fields": {},
"type": "PERSONAL",
"user": 2,
"name": "Rick Astley"
}
];
A specific object is selected and stored in a variable:
var $scope.currentObject = $scope.fieldsToShow[1];
Users can modify the object using checkboxes:
<input ng-model="currentObject.fields.a" type="checkbox">
This updates both $scope.currentObject:
{
"fields": {
"a": true
},
"type": "PERSONAL",
"user": 2,
"name": "Rick Astley"
}
and the original object in $scope.fieldsToShow:
$scope.fieldsToShow = [
{
"fields": {},
"type": "LOGGED_IN"
},
{
"fields": {
"a": true
},
"type": "PERSONAL",
"user": 2,
"name": "Rick Astley"
}
];
After switching back to the first object, clicking the checkbox again correctly updates the fields object. So far so good.
Next step is adding an inner object within the fields object. A new checkbox is created:
<input ng-model="currentObject.fields.anInnerObject.val" type="checkbox">
Switching back to the PERSONAL object and clicking the checkbox correctly updates both the $scope.currentObject:
{
"fields": {
"anInnerObject": {
"val": true
}
},
"type": "PERSONAL",
"user": 2,
"name": "Rick Astley"
}
and the original object in $scope.fieldsToShow:
$scope.fieldsToShow = [
{
"fields": {},
"type": "LOGGED_IN"
},
{
"fields": {
"anInnerObject": {
"val": true
}
},
"type": "PERSONAL",
"user": 2,
"name": "Rick Astley"
}
];
Upon switching back to the LOGGED_IN object, clicking the checkbox unexpectedly changes the value of "anInnerObject" in the PERSONAL object to true.
The baffling behavior has left me wondering how this could happen despite several efforts to debug and seek advice. Any insights or suggestions are greatly appreciated!