AngularJS how to change part of a model

Question

I have action links on a page that change parts of the model. The links have ng-click functions that fire a server action that returns the part of the model that was altered. I assign the result of $http.get(...) to the part of the model that was changed. But the data is never resolved.

GuideControllers.controller('VideoDetailCtrl', ['$scope', '$http', '$routeParams', 'Video',
    function($scope, $http, $routeParams, Video, Preference) {
        $scope.video = Video.get({ id: $routeParams.id });
        $scope.addToWatchlist = function(id) {
            $scope.video.prefs = $http.get('/api/preference/'+id+'/add_to_watchlist.json')
        }
    }
]);

The first Video.get(...) fills in the model with a promise that eventually changes the page, the video.prefs are correct when resolved. But when I fetch the video.prefs individually they never get resolved. I tried saving the $http.get promise in a separate variable then on $http.get(...).success(... I copied the parts out the the variable to videos.prefs but that didn't work either since the temp viable was a promise--I guess.

How should I change part of the model by asking the server for just that bit?

You need a .success after the .get, or else it wont resolve, unless you're doing that later. — tymeJV
– tymeJV, Commented Oct 25, 2013 at 17:58
How are you accessing the $scope.video.prefs? Is it a HTML bind? — Caio Cunha
– Caio Cunha, Commented Oct 25, 2013 at 18:34
tymeJV: I tried assigning the prefs in .success function but that didn't work. The debugger said the prefs were a promise, I couldn't see that there were values there. CaioToOn: example ng-class="{iconSelected : video.prefs.user_watchlist == 0}" or in a content tag <div>{{video.prefs.user_watchlist}}</div> The first display on template fetch works fine, after the $http.get the values are blank/null/undefined. — pferrel
– pferrel, Commented Oct 25, 2013 at 19:21

Saran · Accepted Answer · 2013-10-25 19:45:41Z

1

This should do it:

GuideControllers.controller('VideoDetailCtrl', ['$scope', '$http', '$routeParams', 'Video',
    function($scope, $http, $routeParams, Video, Preference) {
        $scope.video = Video.get({ id: $routeParams.id });

        $scope.addToWatchlist = function(id) {
            $http.get('/api/preference/'+id+'/add_to_watchlist.json').success(function(data) {
                $scope.video.prefs = data;
            });
        }
    }
]);

edited Oct 25, 2013 at 19:45

answered Oct 25, 2013 at 19:34

Saran

3,8833 gold badges40 silver badges59 bronze badges

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

2 Comments

pferrel Over a year ago

Et voila, this is the answer.

pferrel Over a year ago

At first I left the $scope.video.prefs = $http.get(... in and the UI flashed. This is apparently because for the time until the callback is executed prefs is a promise so its values are undefined, which causes an ng-class in the template to have an invalid expression, causing the css to be removed. This left a bad UI state for any objects referring to prefs. Took out the assignment, only assigned in the callback, and the flash goes away showing a smooth UI transition. BTW ng-cloak does not help with this.

Collectives™ on Stack Overflow

AngularJS how to change part of a model

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related