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

Question

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

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

请问，对于实际应用程序来说，最合适的方法是什么？ 我尝试了$scope.rowList.push(row)，但出现了错误:“Uncaught TypeError:无法调用未定义的方法‘push’”。即使在 for 循环中定义作用域变量并且在 Controller 定义之后也是如此。

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