Why javascript variable get reflects on ng-model change?

user_4728451 0
Viewed 205

I declare variable object globally, and assigning it on http call which will run when angular controller loads, Then I'm assigning this object values to angular scope variable and retrieving it in ng-models. On some button click when I change one of ng-model values then it reflects back to Javascript global variable. Why?

This is my view page

<input type="submit" ng-click="Edit()" value="Edit" />
<form name="myEditUserForm" novalidate>
<input type="text" ng-model="Info.Name" required ng-blur="Change()">
<input type="text" ng-model="Info.MobileNo" required ng-blur="Change()">
<input type="text" ng-model="Info.Email" required ng-blur="Change()">
<input type="text" ng-model="Info.Gender" required ng-blur="Change()">
<input type="submit" ng-click="Update()" value="Save Changes" />
 </form>

This is my Angularjs code

app.controller('SomeController', function ($scope, $http) {
 var someList = {};
$http({
        method: 'GET',
        url: '/Dashboard/GetData',
        dataType: 'JSON',
        headers: { 'content-type': 'application/json' }
    }).then(function (response) {
        someList = {
            Name: response.data.Name,
            MobileNo: response.data.MobileNo,
            Email: response.data.Email,
            Gender: response.data.Gender
        };
    });

$scope.Edit = function () {
        $scope.Info = someList;
    };
$scope.Change= function () {
        console.log($scope.UpdateProfile.Email, tenantList.Email);
        if ($scope.Info.Email != someList.Email) {
            alert('changed');
        }
    };

I want to get same data from someList to which I assinged.

angularjs asp.net-mvc javascript
2 Answers

You should take copy of of global veriable in your local scope

Example $scope.Info = angular.copy(someList);

user_62131430

It's because in javascript, objects are mutable and javascript shares references between objects when we assign one object to another. Before I make you understand what is mutability, let's share the concept of reference.

When you create an object / array (array is an object in javascript), what happens? A new state is being created. (Memory allocation to a specific object)

let obj = {} // javascript object
let arr = [1,2,3] // javascript object

let's assign obj into another variable.

let obj1 = obj;

now add some attributes in obj1 variable.

obj1.first_name = 'John'
obj1.last_name = 'Doe'
obj1.age = 30;
console.log(obj1)
console.log(obj)

what's the output?

age: 30
first_name: "John"
last_name: "Doe"

twice, right? It's because, obj1 is pointing obj means obj1 is holding only the reference of obj variable. So, when we change anything in obj1, it's changing the referred variable, obj.

now, the mutable part. A mutable object is an object whose state can be changed after creation of the object.

By mutability, it means the memory occupied by the variable will not be changed but the value can changed. So, when we share references of one mutable object, all the referred variables will be changed when we change one of them.

let x = ['foo', 'bar'];
let y = x; // y is holding the reference of x

x.push('baz')

console.log(x); // ['foo', 'bar', 'baz']
console.log(x === y) // true

So, what to do now? If you want the global variable to remain unchanged, you can copy the variable into another, copy will create new state rather than sharing the same memory between the objects. use angular.copy() or use lodash javascript library.

user_26736920
Related