Javascript AngularJS从http请求重复更新ng中的数据
我寻找解决办法,但没有找到答案。我的问题是,在我的类别视图中,我有一个init函数,它发出http请求并从数据库中获取所有类别。我用这些记录,让ng重复。但当我用表单打开模态以创建新类别时,当模态关闭并查看新类别时,我无法更新ng repeat视图。我以以下方式组织控制器、服务和视图: 看法 服务:Javascript AngularJS从http请求重复更新ng中的数据,javascript,angularjs,angularjs-scope,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Scope,Angularjs Ng Repeat,我寻找解决办法,但没有找到答案。我的问题是,在我的类别视图中,我有一个init函数,它发出http请求并从数据库中获取所有类别。我用这些记录,让ng重复。但当我用表单打开模态以创建新类别时,当模态关闭并查看新类别时,我无法更新ng repeat视图。我以以下方式组织控制器、服务和视图: 看法 服务: function createCategory(category) { return $http.post('api/admin/createCategory', {
function createCategory(category) {
return $http.post('api/admin/createCategory', {
category: category,
idUser: $rootScope.globals.currentUser.idUser,
token: $rootScope.globals.currentUser.token
}).then(function(response) {
return response.data;
});
}
function initCategory() {
return $http.post('api/admin/getAllCategories', {
idUser: $rootScope.globals.currentUser.idUser,
token: $rootScope.globals.currentUser.token
}).then(function(response) {
return response.data;
});
}
我试图再次调用init函数来更新vm.allCategories,但没有成功
有人知道一些解决办法吗
另外,我尝试使用$scope.apply(),但出现了错误,顺便说一句,我在服务中使用了angular 1.6.2。删除承诺。您正在使用promise在控制器中缓存响应。因此,还需要在服务中添加承诺
function initCategory() {
return $http.post('api/admin/getAllCategories', {
idUser: $rootScope.globals.currentUser.idUser,
token: $rootScope.globals.currentUser.token
})
}
在控制器中,按如下方式更新
function initCategory() {
adminService.initCategory().then(function (res) {
vm.allCategories = res.data.categories; // in the response data comes inside data property.
})
}
更改HTML模板,如下所示:
<div class="col-lg-4 margin-bottom-20" ng-repeat="category in adminCtr.allCategories track by category.id_cat">
演示
angular.module('myApp',[]);
有棱角的
.module('myApp')
.controller(“MyController”,MyController);
MyController.$inject=['$scope','$timeout'];
函数MyController($scope,$timeout){
var vm=这个;
变量a=[{
“id_cat”:“1”,
“名称”:“fgfdgfd”
}, {
“id_cat”:“2”,
“名称”:“dfgfdgdf”
}, {
“id_cat”:“3”,
“名称”:“dfgfdgdffdgdfg”
}];
变量b=[{
“id_cat”:“1”,
“名称”:“fgfdgfd”
}, {
“id_cat”:“2”,
“名称”:“dfgfdgdf”
}, {
“id_cat”:“3”,
“名称”:“dfgfdgdffdgdfg”
}, {
“id_cat”:“4”,
“名称”:“dfgfdgdfg”
}, {
“id_cat”:“5”,
“名称”:“DFDSFSDFSD”
}, {
“id_cat”:“6”,
“名称”:“sdfdsfsdfsdfsd”
}, {
“id_cat”:“7”,
“名称”:“DFGFDGFGFDGDF”
}];
vm.allCategories=a;
$timeout(函数(){
$scope.$evalAsync(函数(){
vm.allCategories=b;
});
}, 2000);
}
{{category.name}
您能否创建一个最小的工作plnkr/jsbin/JSFIDLE?阅读data.category包含哪些内容?你能给我们展示一下样本数组/对象格式吗?{“categories”:[{“id_cat”:“1”,“name”:“fgfdfgfd”},{“id_cat”:“2”,“name”:“dfgfdfdfdf”},{“id_cat”:“3”,“name”:“dfgfdfdfdgdfg”},{“id_cat”:“4”,“name”:“dfgfdgdgdgfdfg”},{“id_cat”:“5”,“name”:“dfdsfsdfdfdfsd”},{“id_cat”:“6”,“name”:“sdfsfdfdsfsd”},{“dfsfd”},{“dfsf只需名称和id categoryexactly,我想避免刷新页面它不起作用,同样的结果,我应该刷新页面以查看新添加的CategoryID,您可以控制台vm.allCategories
Yes,在函数initCategory中获取更新的记录,但视图在vm.allCategories=res.data.categories之后保持不变代码>行添加$scope.$apply()
并尝试itI我得到的错误$digest已经在进行中,我认为1.4版之后不起作用不,仍然是一样的,我确实需要刷新页面才能查看结果我遇到了这个错误$scope。$safeApply不是一个使用$scope的函数try。$evalAsync
现在我甚至在刷新页面后也看不到记录在最后我决定在空白页面上创建位置路径,然后在类别视图上返回,这不是最好的,但比重新加载更好。
function initCategory() {
adminService.initCategory().then(function (res) {
vm.allCategories = res.data.categories; // in the response data comes inside data property.
})
}
<div class="col-lg-4 margin-bottom-20" ng-repeat="category in adminCtr.allCategories track by category.id_cat">
function initCategory() {
adminService.initCategory().then(function(data) {
$scope.$evalAsync(function(){
vm.allCategories = data.categories;
});
})
}