JavaScript array.push (object) with Angular ng-repeat not functioning as expected

Question

I have almost the exact same snippet of code in other areas of my application and it works perfectly fine.

I'm pushing an object into an empty array and have an ng-repeat in my view.

JavaScript:

$scope.upload = $upload.upload({
    url: BASE + 'files/tasks',
    file: file,
    data: data
}).success(function(data) {
    for(var i = 0; i < $scope.case.task.notes.length; i++) {
        if($scope.case.task.notes[i].in_api === false) {
            $scope.case.task.notes[i].documents.push(data);
        }
    }
});

When I console.log the $scope.case.task.notes after adding the JSON response to the array, I see the expected result (the note object along with the documents array, with the returned object in the documents array).

In my view, the page has the HTML below augmented with Angular templating:

<div>
    <p class="chat-file row" ng-repeat="document in note.documents track by $index">
        <b class="pull-left col-sm-6">
            <i class="fa fa-file"></i> {{document.name}} 
        </b>
        <span class="col-sm-6 pull-right"> 
            <a href="http:/download.com?f={{document.id}}&n={{document.name}}" class="btn btn-xs btn-success">download</a> 
        </span>
    </p>
</div>

When I first load the page, all of the notes that do have documents show up correctly. However, when the success function is called from the above upload function, and the document is pushed onto the note's array, it does not appear in the view.

If it makes a difference, the HTML above is also surrounded inside of an ng-repeat that iterates over every note (so it's multi-level).

What could be the problem? The JavaScript function is functioning appropriately but the view is not updating when the model does.

So it works on initial load telling us that the 'note.documents' is correct referencing. Try changing any instance of 'notes' to 'note' in the success. — user3821538
– user3821538, Commented Feb 4, 2015 at 18:51

nanndoj · Accepted Answer · 2015-02-04 18:51:44Z

4

Try to use $scope.$apply() to tell your view that scope data has changed:

 .success(function(data) {
     // Do what you want.
     $scope.$apply();
 });

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life-cycle of exception handling, executing watches.

answered Feb 4, 2015 at 18:51

nanndoj

6,7907 gold badges33 silver badges43 bronze badges

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

1 Comment

user4097807 Over a year ago

Same result with $scope.$apply().

Brent Washburne · Accepted Answer · 2015-02-04 19:29:02Z

0

You seem to be using different variables. In the HTML, you use note.documents:

ng-repeat="document in note.documents ...

In the JavaScript, you use $scope.case.task.notes[i].documents.

You need to make them reference the same array. Maybe if you set

$scope.documents = $scope.case.task.notes[i].documents;

in your JavaScript and change the HTML to read

ng-repeat="document in documents ..."

then Angular with pick up the changes?

edited Feb 4, 2015 at 19:29

answered Feb 4, 2015 at 18:56

Brent Washburne

13.2k4 gold badges65 silver badges86 bronze badges

3 Comments

user4097807 Over a year ago

No, it's correct. Like I said, above it I'm iterating over the notes (note in case.task.notes).

Brent Washburne Over a year ago

So you are setting $scope.note = $scope.case.task.notes[i] somewhere?

user4097807 Over a year ago

Yes it's all set, I've only provided what's necessary to find the problem.

Collectives™ on Stack Overflow

JavaScript array.push (object) with Angular ng-repeat not functioning as expected

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related