Angularjs updates model fail after http call

Question

I have a group of accounts like [{username: xxx, password: xxx} , ....], then I print them to page like below,

<tr ng-repeat = 'account in accounts'>
   <td>{{account.username}}<td>
   <td>{{account.password}}<td>
   <td><button ng-click='ResetPassword(account)'>Reset</button></td>
</tr>

The ResetPassword() func,

$scope.ResetPassword = function(account){
        $http.post('/reset/password/'+account.username).success(function(rAccount){

            account = rAccount; //account & rAccount have the same structure.
         }
    });
};

The problem is if I override account=rAccount, the password UI never been updated, unless I set the attribute manually like account.password = rAccount.password, see this JSFIDDLE

So, why it doesn't work via obj overriding? then how to fix it? my account is far more complex than this example, it's not a good practice to update one by one I think, thanks.

Anik Islam Abhi · Accepted Answer · 2015-11-19 04:17:20Z

1

Use angular.extend

angular.extend(dst, src);

Like this

angular.extend(account, rAccount);

JSFIDDLE

answered Nov 19, 2015 at 4:17

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

Comments

thomasbabuj · Accepted Answer · 2015-11-19 04:55:26Z

0

The reason it doesn't work mainly because, angularjs adds a $$hashKey property to objects in collections that are being used with ng-repeat.

$$hashkey is a auto generated key which angular assigns to array,collection passed in ng-repeat directive. Angular uses it to keep track of any changes made to array and update dom accordingly.

So in your case account and rAccount doesn't have the same structure. thats why it works for angular.extend as @anik-islam-abhi suggested. You can also use

angular.copy(source,[destination]);

Like

 angular.copy(rAccount,account);

http://jsfiddle.net/HB7LU/20042/

answered Nov 19, 2015 at 4:55

thomasbabuj

3,9393 gold badges27 silver badges22 bronze badges

Comments

Nguyen Sy Thanh Son · Accepted Answer · 2015-11-19 06:01:01Z

0

account = rAccount does not work. You have to update $scope.accounts value

See http://jsfiddle.net/HB7LU/20043/

edited Nov 19, 2015 at 6:01

answered Nov 19, 2015 at 5:04

Nguyen Sy Thanh Son

5,3961 gold badge25 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angularjs updates model fail after http call

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related