当 ajax 调用更改其值时,AngularJS 中的 ng-repeat 列表不会更新 [英] ng-repeat list in AngularJS isn't updated when an ajax call changing its value
问题描述
我完全糊涂了.当 ajax 调用更改其值时,为什么我的 ng-repeat 不刷新?我在这里看到了很多 Q&As,但没有一个谈到 ajax 调用.
HTML:
<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>
JS:
function EntryCtrl ($scope, $http) {$scope.rootEntry = [];$http.get('read/root').success(function(root) {$scope.rootEntry = 根;控制台日志($scope.rootEntry);});}
并且控制台确实记录了服务器返回的数组.但是 html 中的列表从未更新过.如果我使用 $scope.$apply
,则会发生关于 $digest
的错误.
控制台输出
[对象]0:对象属性:空编号:534580464aac494e24000001"名称:注册表"小路: ""__proto__:对象长度:1__proto__:数组[0]
所以这是服务器返回的 root
结构.会不会是数据类型的问题?因为它是Object
而不是Array
.我使用 Golang 作为服务器并使用 json.Marshal()
来打包来自 MongoDB 的数据.
更新
function EntryCtrl ($scope, $http) {$scope.rootEntry = [];$http.get('read/root').success(function(root) {$scope.rootEntry = 根;控制台日志($scope.rootEntry);});控制台日志($scope.rootEntry);}
后面的输出是[]
.可能是$http async造成的,会是这个原因吗?
决赛
我知道为什么.我使用了一个叫做jsTree
的插件,它会对节点做一些装饰,所以我插入的节点会被覆盖.
谢谢大家.
我已经测试了你的代码,正如 tymeJV 所说,你的实现没有问题,我建议检查控制台窗口是否有一些可能的错误.
>
示例:
function EntryCtrl ($scope, $http) {$scope.rootEntry = [];$http.get('https://api.github.com/users/mralexgray/repos').success(function(root) {$scope.rootEntry = 根;控制台日志($scope.rootEntry);});}
现场示例:http://plnkr.co/edit/Grlgfob6tjE63JizWdCD?p=preview一个>
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: Object
Attributes: null
Id: "534580464aac494e24000001"
Name: "Registry"
Path: ""
__proto__: Object
length: 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.
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
这篇关于当 ajax 调用更改其值时,AngularJS 中的 ng-repeat 列表不会更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!