Question

我在组合来自多个$http调用的数据并在HTML表格中显示列表时遇到问题。有一个$http调用，它返回一组URL。然后，我遍历URL列表并在循环中进行多个$http调用。每个内部http调用返回一个表行。因此，我需要为所有$http调用组成行，并在视图中生成一个表。我使用Ajax调用和jQuery解决了这个问题。但是，下面的Angular代码检索内行$http调用的数据，但我无法将所有$http调用的数据合并到一个列表中，并在视图中使用say， NG：重复

我尝试连接行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。你很少需要在angularjs中使用jquery。

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);
            }
          );
        }
      }
    }
  );
});

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

1 个答案: