Angularjs-在for循环中组合来自多个$http调用的数据

Question

我在组合来自多个$http调用的数据和在HTML表中显示列表时遇到问题。有一个第一个$http调用，它返回一组URLS。然后，我遍历URL列表，并在循环中进行多个$http调用。每个内部http调用都返回一个表行。因此，我需要为所有$http调用编写行，并在视图中生成一个表。我使用Ajax调用和jQuery获得了解决方案。但是，下面的Angular代码检索内部行$http调用的数据，但我无法将所有$http调用的数据组合到一个列表中，并使用ng:repeat在视图中显示。

我尝试连接行html，但是连接的字符串在for循环之外丢失了。

请问，对于一个真实的应用程序来说，最合适的方法是什么。我试过$scope.rowList.push(row)，但它错了："Uncaught TypeError: Cannot call method 'push' of undefined"。甚至在for循环中定义了作用域变量之后，以及在控制器定义之后。

HTML:

<table>
<tbody ng:repeat="row in rowList">
</tbody>
</table>

JavaScript:

sampleApp.controller('TableRowController', function($scope, $http) {
$scope.rowList= '';
$http({ method:'GET',
url: 'http://localhost:8080/xxx-webapp-1.0-SNAPSHOT/restful/services/RowList/actions/listAll/invoke',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
var resultType = data.resulttype;
var objects = data.result.value;
console.log(objects);
if(resultType == "list"){
var html='';
for(i=0; i < objects.length; i++){
//Restful call                  
$http({ method:'GET',url: objects[i].href,headers: {'Accept': 'application/json'}
}).
success(
function (rowdata) {

var row= '<tr><td width="70%">'+ rowdata.members.xxxDescription.value +
'</td><td  align ="center" width="30%">'+ 
rowdata.members.xxxprice.value +'</td></tr>';
html+=row;
//$scope.rowList.push(row);
}
);                      
}
alert('INNER HTML = '+html);
$scope.rowList=html;
}
}
);  
});

Answer 1

正如有人提到的，不要混合jquery和Angularjs。您很少需要将jquery与angularjs一起使用。

HTML:

<table>
<tbody>
<tr ng-repeat="row in rowList">
<td width="70%">{{row.members.xxxDescription.value}}</td>
<td align ="center" width="30%">{{row.members.xxxprice.value}</td>
</tr>
</tbody>
</table>

JS:

sampleApp.controller('TableRowController', function($scope, $http) {
$http({ method:'GET',
url: 'http://localhost:8080/xxx-webapp-1.0-SNAPSHOT/restful/services/RowList/actions/listAll/invoke',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
var resultType = data.resulttype;
var objects = data.result.value;
$scope.rowList= [];
console.log(objects);
if(resultType == "list"){
for(i=0; i < objects.length; i++){
//Restful call
$http({ method:'GET',url: objects[i].href,headers: {'Accept': 'application/json'}
}).
success(
function (rowdata) {
$scope.rowList.push(rowdata);
}
);
}
}
}
);
});