1

我在组合来自多个$http调用的数据并在 HTML 表中显示列表时遇到问题。有一个第一个$http调用，它返回一组 URL。然后，我遍历 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;
            }
        }
);  
});
4

1 回答 1

3

正如有人提到的，不要混合使用 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);
            }
          );
        }
      }
    }
  );
});
于 2014-02-27T10:33:36.080 回答