ng-repeat list in AngularJS isnt updated when an ajax call changing its value

2024/2/27 8:49:25

I'm totally confused. Why doesn't my ng-repeat refresh when there's an ajax call changing its value? I've seen many Q&As here, but none of them talked about ajax call.

HTML:

<div class="row" ng-controller="EntryCtrl"><div id="treeview" class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><ul><li ng-repeat="root in rootEntry">{{root.Name}}</li></ul></div>
</div>

JS:

function EntryCtrl ($scope, $http) {$scope.rootEntry = [];$http.get('read/root').success(function(root) {$scope.rootEntry = root;console.log($scope.rootEntry);});
}

And the console did log an array the server returned. But the list in html never got updated. If I used $scope.$apply, an error concerning $digest would happen.

Console Output

[Object]0: ObjectAttributes: nullId: "534580464aac494e24000001"Name: "Registry"Path: ""__proto__: Objectlength: 1__proto__: Array[0]

So it's the structure of root the server returns. Would it be the problem of data type? Because it's Object rather than Array. I use Golang as server and use json.Marshal() to pack the data from MongoDB.

Update

function EntryCtrl ($scope, $http) {$scope.rootEntry = [];$http.get('read/root').success(function(root) {$scope.rootEntry = root;console.log($scope.rootEntry);});console.log($scope.rootEntry);
}

The latter output is []. It's likely because of async of $http, so will it the reason?

Final

I know why. I used a plugin called jsTree, which will do some decorations with the node, so the node I inserted would be overwritten.

Thank you all.

Answer

I've tested your code and as tymeJV said ,there is no problem with your implementation, i would suggest checking the console window for some possible errors.

Example:

function EntryCtrl ($scope, $http) {$scope.rootEntry = [];$http.get('https://api.github.com/users/mralexgray/repos').success(function(root) {$scope.rootEntry = root;console.log($scope.rootEntry);});
}   

Live example : http://plnkr.co/edit/Grlgfob6tjE63JizWdCD?p=preview

http://en.ppmy.cn/q/41315.html

Related Q&A

Vue - when and why using $el

Ive found this answer here: https://stackoverflow.com/a/50431015/11735826 and i wonder why .$el was used here, and also why does it not work without the el element?

Detecting my own Firefox extension from a webpage

I am trying to find an easy way to detect if my extension is installed in Firefox 3.6. This should be done from a webpage, probably using javascript.Ive read a lot of blogs that says that I should try …

d3 — Progressively draw a large dataset

Im using d3.js to plot the contents of an 80,000 row .tsv onto a chart.The problem Im having is that since there is so much data, the page becomes unresponsive for aprox 5 seconds while the entire data…

Highlight div onclick [duplicate]

This question already has answers here:How can I highlight a selected list item with jquery?(4 answers)Closed 8 years ago.I have a question, what jQuery code need to be used, to highlight DIV in list …

What is the difference between assigning a function via this vs. prototype? [duplicate]

This question already has answers here:Closed 11 years ago.Possible Duplicate:Use of prototype vs. this in Javascript? I am confused with these two type of adding a method to a function. Let me expla…

In Jquery How to handle paste? [duplicate]

This question already has answers here:Closed 12 years ago.Possible Duplicates:How do you handle oncut, oncopy, and onpaste in jQuery?jQuery catch paste input I have a textarea, on paste to that text…

JavaScript Function Queue

I have a ton of functions that need to run in succession, but not before the other has completed. What I need is a way to queue these functions to run only after the previous function was successfully …

how to find the latest selected item of a multiple select tag using jquery?

I have a <select multiple="multiple" id="multi"> in my website, and I have a script in jquery that has this function:$("#multi").on("change",function(){}) …

How do I change a glyphicon upon clicking it in Bootstrap 3.2?

I want to have an arrow pointing to the right to allow the user to expand the sidebar, and then change that glyphicon to point to the left. That way, it points to the left so that they understand how t…

Angular $setPristine() not working

Im trying to use Angulars built-in form functions, specifically setPristine() to clear the form on user submit. My controller has access to $scope.newForm (my form) with all of its methods, but running…