我是AngularJs世界的新手 – 我试图从两个REST WS调用中获取数据.
第一个返回一组数据(工作正常) – 使用第一个数据的值,我需要进行另一个webservice调用并检索数据并在表中打印.
<table ng-table="tableParams" id="request_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Price</th>
<th>Short Description</th>
<th>Requested for</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="request in req_list | orderBy:sortType:sortReverse | filter: searchItem">
<p ng-repeat="item in fetchRequest(request.price)"></p>
<td>{{request.number }}</td>
<td>{{request.price}}</td>
<td>{{request.short_description}}</td>
<td>{{request.requested_for.display_value}}</td>
<td>{{request.stage}}</td>
</tr>
</tbody>
脚本：
angular.module('sc_request_list')
.controller('MyRequestItems',[
'$scope','$http',function($scope,$http) {
$scope.sortType = 'number' //set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchItem // set the default search/filter term
$scope.itemUrl = '/api/sc_request';
$scope.reqUrl = '/api/sc_req_item';
$http.defaults.headers.common.Accept = "application/json";
$scope.fetchRequestItemList = function() {
$http({
method: 'GET',url: $scope.itemUrl,}).
success(function(data,status) {
var result = data;
var json = JSON.stringify(result);
var data = JSON.parse(json);
$scope.req_list = data.result; // response data
}).
error(function(data,status) {
$scope.req_list = [{
"req_list": "Error fetching list"
}];
});
}
$scope.fetchRequest = function(request) {
console.log("Request Number is: " + request);
$http({
method: 'GET',url: $scope.reqUrl + "/" + request,status) {
var result = data;
var json = JSON.stringify(result);
var data = JSON.parse(json);
$scope.req = data.result; // response data
}).
error(function(data,status) {
$scope.req = [{
"req": "Error fetching list"
}];
});
}
}
]);
任何帮助很多appreaciated.
解决方法
您的调用是异步调用的,因此在进行调用时,其余代码仍在执行.从而,
<p ng-repeat="item in fetchRequest(request.price)"></p>
在request.price甚至定义之前执行.
您需要做的是将呼叫链接到您的api呼叫：
$http({
method: 'GET',}).
success(function(data,status) {
var result = data;
var json = JSON.stringify(result);
var data = JSON.parse(json);
$scope.req_list = data.result; // response data
//Loop through requests
$scope.req_list.foreach(function (elem,index) {
//chained call is here
$scope.fetchRequest(elem.price,index);
});
}).
error(function(data,status) {
$scope.req_list = [{
"req_list": "Error fetching list"
}];
});
$scope.fetchRequest = function(request,index) {
console.log("Request Number is: " + request);
$http({
method: 'GET',}).
success(function(data,status) {
var result = data;
var json = JSON.stringify(result);
var data = JSON.parse(json);
//Attach result of api call to apropriate element of req_list array
$scope.req_list[index].items = data;
}).
error(function(data,status) {
$scope.req = [{
"req": "Error fetching list"
}];
});
}
}
然后改变：
<p ng-repeat="item in fetchRequest(request.price)"></p>
至：
<p ng-repeat="item in request.items"></p>
