我想从返回函数中获取一个JSON对象数组,并使用ng-repeat在这个数组中循环,但它对我不起作用,这是我的代码:
var app=angular.module("myApp",[]);
app.controller("myController",function($scope,$http){
$scope.listOfFields=[];
$scope.getlistOfFieldsByIdTable = function(idTable)
{
$http.get("/listOfFieldsByIdTable/"+idTable)
.success(function(data){
return data;
});
};
});
<!-- first call -->
<!-- 150 is the id of the table-->
<div class="panel-body" ng-app="myApp" ng-controller="myController">
<ul ng-init="listOfFields = getlistOfFieldsByIdTable(150)">
<li ng-repeat="field in listOfFields ">
{{field.name}}
</li>
</ul>
</div>
<!-- second call -->
<div class="panel-body" ng-app="myApp" ng-controller="myController">
<ul>
<lib ng-repeat="field in getlistOfFieldsByIdTable(150)">
{{field.name}}
</li>
</ul>
</div>
我使用的两个调用对我不起作用,当我使用像“Chrome Chrome中的高级Rest客户端插件”之类的RestClient时,我的服务工作正常 你能帮助我如何正确调用我的对象数组,并在我的HTML页面中显示结果, 谢谢你提前。
答案 0 :(得分:1)
问题在于getlistOfFieldsByIdTable
功能:
//WRONG
$scope.getlistOfFieldsByIdTable = function(idTable)
{
$http.get("/listOfFieldsByIdTable/"+idTable)
.success(function(data){
return data;
});
};
return data
语句将数据返回到.success
方法内的匿名函数。它不会将数据返回到父函数。由于在父级别未指定返回,因此返回的值为null
。需要在嵌套的每个级别都进行返回。
//BETTER
$scope.getlistOfFieldsByIdTablePromise = function(idTable) {
var promise = $http.get("/listOfFieldsByIdTable/"+idTable);
var derivedPromise = promise.then( function onfulFilled(response) {
var data = response.data;
//Sets scope value asynchronously
$scope.listOfFieldsByIdTable = data;
//return value creates derived promise
return data;
};
return derivedPromise;
};
在此示例中,每个嵌套级别都有一个return
语句,但返回的最终项目是而不是值;这是一个承诺。
$http
服务仅返回承诺。附加到promise对象的方法只返回promise。数据仅作为副作用进行,并且当XHR完成时,操作在中发生 。
在我的ng-repeat中,我应该使用你在return函数中使用的
listOfFieldsByIdTable
或derivedPromise
?
在ng-repeat
指令中使用$scope.listOfFieldsByIdTable
变量。 ng-repeat
指令在变量上放置$watch
,检查每个摘要周期的变化,当数据出现(或更改)时,它会更新DOM。
从派生的承诺中对控制器中的数据进行额外的处理,链。
答案 1 :(得分:0)
当您执行某些异步操作时,您无法返回数据,因此您必须处理回调和/或承诺
例如,我们可以使用返回promise的方法创建服务:
function Service($http) {
this.getData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([1,2,3,4,5]);
}, 1000);
});
}
}
然后在这样的控制器中使用此服务:
function Controller($scope, Service) {
//Initialize our list
$scope.list = [];
//Call our promise
Service.getData().then((response) => {
//After 1s, retrieve the data
$scope.list = response
//Update the bindings
$scope.$apply();
});
}
您可以看到Working Plunker