AngularJS view doesn't update when assigning a $http response to $scope

Question

I have a ng-repeat loop for a number of values. While looping, I fetch a variable from another array of values and use that:

<div ng-repeat="i in [1,2,3]">
    <div ng-init="obj = getObject(i)">
        <pre>{{ obj }} </pre>
    </div>
</div>

My goal is now to change a property of that variable and do a POST request containing the updated variable. The response for that from the server then contains all values, which I bind to $scope in order to update the view.

<a ng-click="change(obj, 5)">Set property to 5</a>

$scope.change = function(o, value) {
    o.prop = value;
    // save() sends a POST requests and returns a JSON with all values
    $scope.values = save(o);
}

This works, but only the first time I do it. All other changes will be reflected in the $scope.variables, but not in the {{ obj }} variables in the template. $scope.$apply() has no effect, either.

I've created a JS Fiddle to show my problem, which only mocks the HTTP requests. However, I have found that even when I run this code against my REST backend, the first time everything works fine but every time after that reflects no changes at all.

Your code is confusing to me. Why are you posting to the server on each iteration of a for loop, and binding the view to its response each time? I also don't understand what the purpose of getObject() is. — Brett
– Brett, Commented Oct 28, 2014 at 19:22
The example is simplified, but let me explain: getObject retrieves an object from another array based on the current $index (and other values not included in the example). Bear with me and ignore the POST request, you can see that it has no effect here: jsfiddle.net/0ps2d7Lp/7. — doque
– doque, Commented Oct 28, 2014 at 19:25

orhanhenrik · Accepted Answer · 2014-10-28 19:30:14Z

2

I think the issue is caused because you are using ng-init, which probably sets a non-changing value since you are calling a function. It will work once you change {{ obj }} to {{ getObject(i) }}. The only issue is that your variables are also being referenced and modified in the script allTwo and allThree are being modified since you directly assign them. I fixed that by cloning the objects, but it will probably not be an issue when you are using AJAX. Here is an updated version of your fiddle: http://jsfiddle.net/0ps2d7Lp/6/

answered Oct 28, 2014 at 19:30

orhanhenrik

1,4158 silver badges11 bronze badges

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

1 Comment

doque Over a year ago

You are perfectly right, changing all occurences from {{ obj }} to {{ getObject(i) }} solved my problem. Thank you so much!!

Srinivas Paila · Accepted Answer · 2014-10-28 19:26:29Z

2

I have made changes to your fiddle.

<div ng-repeat="i in [1,2,3]">
   <div>
     <pre>{{ getObject(i) }} </pre>
   </div>
</div>

Controller changes:

$scope.changeType = function(ids, type) {
    angular.forEach($scope.objects, function(o) {
        if (ids.indexOf(o.id) > -1) {
            o.type = type;   
            var response = (type === 2) ? allTwo : allThree

            $scope.objects = angular.copy(response);
        }
    });
};

Link to your updated fiddle is here

answered Oct 28, 2014 at 19:26

Srinivas Paila

8176 silver badges10 bronze badges

3 Comments

orhanhenrik Over a year ago

Good solution, but it might be helpful to explain why you made those changes

doque Over a year ago

While this solution works with the JS fiddle I provided, the actual issue is the one mentioned in my reply to @Izzey's answer above.

Srinivas Paila Over a year ago

I agree with @lzzey's explanation, thats the reason you need to remove ng-init, but you do not need to parse and stringify. JSON.parse(JSON.stringify(allTwo)) : JSON.parse(JSON.stringify(allThree)); Instead you can just use angular.copy() which will break the chain of referential data.

Brett · Accepted Answer · 2014-10-28 19:38:47Z

In your case, getObject() is necessary, but I excluded it in my answer for simplicity sake. I understand that you need to perform a PUT/POST request to update the objects on the server-side, but I don't believe it's necessary at all to re-bind the view to the server's response. Fundamentally, a PUT doesn't require a response other than 200 OK in most cases. The point is you're telling the server to update objects, not create them. Thus, no primary keys change, so, you don't need to rebind the objects. Changes are already resident in memory.

HTML

<div class="example" ng-controller="MyCtrl">       
    <div ng-repeat="obj in objects">
        <div><pre>{{ obj }}</pre></div>
    </div>
    <a href="#" ng-click="changeType([1,2,3], 2)">Change all to Type 2</a>
    <a href="#" ng-click="changeType([1,2,3], 3)">Change all to Type 3</a>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    // initial objects
    $scope.objects = [
        { id: 1, type: 1 },
        { id: 2, type: 2 },
        { id: 3, type: 3 }
    ];

    $scope.changeType = function(ids, type) {
        angular.forEach($scope.objects, function(o) {
            if (ids.indexOf(o.id) > -1) {
                o.type = type;
                // Perform your PUT/POST request here for each
                // updated object to update it on the server-side.
                // There is no need to bind to a server response.
            }
        });
    };    
}

Collectives™ on Stack Overflow

AngularJS view doesn't update when assigning a $http response to $scope

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related