http调用后如何更新视图中的范围变量值? [英] How to update scope variable value in view after http call?
问题描述
我正在使用 Angularjs 1.4.3 制作我的第一个项目.
在我的控制器中,我正在发出一个 http 请求,在此 http 请求的 success 方法中,我正在更新范围变量.在 http 调用中,我获得了最新值,但在视图端它没有更新值.
Plunker 链接(感谢@rupesh_padhye).(因为它调用的是servlet action,所以Plunker中不会显示任何数据)
app.controller('measuresCtrl', ['$scope', '$modal', '$http', function($scope, $modal, $http) {$scope.groups = []$scope.loadAllMeasure = function() {$http.get("fetchAllMeasure").成功(功能(数据){console.log("插入前");控制台日志($scope.groups);$scope.groups = data.measures;console.log("插入后");控制台日志($scope.groups);}).错误(功能(){});};$scope.loadAllMeasure();$scope.submit = 函数(表单){$http({方法:'POST',网址:'saveMeasure',数据: {id:form.id,名称:form.name,描述:form.description},标头:{'Content-Type':'application/x-www-form-urlencoded'}}). 成功(功能(数据,状态,标题,配置){$scope.loadAllMeasure();}).错误(功能(数据,状态,标题,配置){});}
})
每当我对度量执行任何 CRUD 操作时,我都会调用一个方法 $scope.loadAllMeasure();
.但它没有更新视图(jsp)页面中的值.
我尝试了 $scope.$apply 方法,但我收到 Error: $digest already in progress
.
当我在 success 方法中使用 console.log 打印 $scope.groups 的值时,它会显示最新的值.
在我的视图 (jsp) 页面中,我只是使用 ng-repeat 函数以表格格式显示所有记录.
我的视图页面的代码(最少代码)-
<div><input type="checkbox" id="checkbox-{{group.id}}" class="ui-checkbox"/><label for="checkbox-{{group.id}}">{{group.name}}</label><div>{{group.description}}</div><div><div class="fa fa-pencil button" data="{{group.id}}" id="{{::elementId}}" ng-click="showEditForm(group.id, $event)"></div><div class="fa fa-trash button" data="{{group.id}}" ng-click="deleteGroup(group.id)"></div><div class="fa fa-clone button" data="{{group.id}}" id="{{::elementId}}" ng-click="showCloneForm(group.id, $event)"></div>
console.log 中的值是
插入前Object { id=1, description="Measure Description1", name="Demo"}]
和
插入后[对象{ id=1,描述=度量描述1",名称=演示"},对象{ id=2,描述=描述2",名称=演示2"}]
如何在http调用后更新view中的scope变量值?
我看不出你的示例代码有什么问题.
我创建了一个 JSFiddle 来尝试帮助您.
服务器调用已被一个返回承诺的 setTimeout 函数取代.
请参阅 JSFiddle https://jsfiddle.net/sjwkbzxa/
请看下面的例子:
<button data-ng-click="loadAllMeasure()">从服务器加载列表</button><ul><li data-ng-repeat="分组 | orderBy:'name'"><span>{{group.description}}</span>
JavaScript:
angular.module('application',[]).controller("TestController", ['$scope', '$q', function($scope, $q){$scope.groups = [{ id:1, description:"Initial List", name:"Demo"}];$scope.loadAllMeasure = function(){加载数据().然后(功能(数据){$scope.groups = 数据;});};函数加载数据(){var deferred = $q.defer();设置超时(功能(){var data = [{ id:1, description:"Measure Description1", name:"Demo"}, { id:2, description:"Description2", name:"Demo2"}];deferred.resolve(data);}, 3000);返回 deferred.promise;}}]);
也许您遗漏了一些我们看不到的东西?
I am making my first project using Angularjs 1.4.3.
In my controller I am making a http request, in the success method of this http request I am updating a scope variable. In http call I am getting the latest values but in the view side its not updating the values.
Plunker Link (@rupesh_padhye thanks). (Since it is calling the servlet action, so no data will be shown in Plunker)
app.controller('measuresCtrl', ['$scope', '$modal', '$http', function($scope, $modal, $http) {
$scope.groups = []
$scope.loadAllMeasure = function() {
$http.get("fetchAllMeasure")
.success(function(data) {
console.log("Before insert");
console.log($scope.groups);
$scope.groups = data.measures;
console.log("After insert");
console.log($scope.groups);
})
.error(function() {
});
};
$scope.loadAllMeasure();
$scope.submit = function (form) {
$http({
method: 'POST',
url: 'saveMeasure',
data: {
id: form.id,
name: form.name,
description: form.description
},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data, status, headers, config) {
$scope.loadAllMeasure();
}).error(function(data, status, headers, config) {
});
}
})
And whenever I am performing any CRUD operation on measures I am calling a method $scope.loadAllMeasure();
. But its not updating the values in the view (jsp) page.
I have tried $scope.$apply method but I am getting Error: $digest already in progress
.
When I printed the value for $scope.groups using console.log inside success method, then its showing the latest values.
In my view (jsp) page I am just using ng-repeat function to show all the records in table format.
Code for my view page (minimal code) -
<div ng-repeat="group in groups | orderBy:'name'">
<div>
<input type="checkbox" id="checkbox-{{group.id}}" class="ui-checkbox" /><label for="checkbox-{{group.id}}">{{group.name}}</label>
</div>
<div>{{ group.description}}</div>
<div>
<div class="fa fa-pencil button" data="{{group.id}}" id="{{::elementId}}" ng-click="showEditForm(group.id, $event)"></div>
<div class="fa fa-trash button" data="{{group.id}}" ng-click="deleteGroup(group.id)"></div>
<div class="fa fa-clone button" data="{{group.id}}" id="{{::elementId}}" ng-click="showCloneForm(group.id, $event)"></div>
</div>
</div>
Values in console.log are
Before insert
Object { id=1, description="Measure Description1", name="Demo"}]
And
After Insert
[Object { id=1, description="Measure Description1", name="Demo"}, Object { id=2, description="Description2", name="Demo2"}]
How to update scope variable value in view after http call?
I cant see anything wrong with your example code.
I have created a JSFiddle to try and help you.
The server call has been replaced by a setTimeout function that returns a promise.
Please see JSFiddle https://jsfiddle.net/sjwkbzxa/
Please see example below:
<div data-ng-controller="TestController as vm">
<button data-ng-click="loadAllMeasure()">Load List from Server</button>
<ul>
<li data-ng-repeat="group in groups | orderBy:'name'">
<span>{{group.description}}</span>
</li>
</ul>
</div>
The javascript:
angular.module('application',[]).controller("TestController", ['$scope', '$q', function($scope, $q){
$scope.groups = [{ id:1, description:"Initial List", name:"Demo"}];
$scope.loadAllMeasure = function(){
loadData().then(function(data){
$scope.groups = data;
});
};
function loadData(){
var deferred = $q.defer();
setTimeout(function(){
var data = [{ id:1, description:"Measure Description1", name:"Demo"}, { id:2, description:"Description2", name:"Demo2"}];
deferred.resolve(data);
}, 3000);
return deferred.promise;
}
}]);
Maybe you are missing something on your side that we cant see?
这篇关于http调用后如何更新视图中的范围变量值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!