javascript - AngularJS : Get each object from array and then make async calls

Question

我有两个表，类别和产品，基数为 1-N。

我需要做的是获取属于特定类别的每件产品。

这是 html 表格

<tr ng-repeat="category in categories">
    <td>{{category.id}}</td>
    <td>{{category.name}}</td>
    <td>{{products[category.id]}}</td>
</tr>

这是 Controller ，但我不知道如何将categories数组与另一个函数合并，以便从categories数组中获取每个对象，然后使用 $http 服务进行异步调用

app.controller("appController", function($scope. $http, getCategoriesService){

    // Here I get all categories
    $scope.categories = getCategoriesService.query();

    //1. This function receive an object as a parameter and then 
    // make the respective request.
    //2. So what I need to do is send every category from 'categories'
    // array and get all products by category.
    //3. I don't know how to merge this function with the array above
    function(category){
        $http("getProductsByCategory/"+category.id)
        .success(function(data){
            $scope.product[category.id];
        })
        .error(function(status){
            console.log(status)
        })
    }
});

app.factory("getCategoriesService", function($resource){
    return $resource("categories", {}, {
        listCategories: {
            method: "GET",
            isArray: true
        }
    })
})

有什么想法吗？

Answer 1

您可以使用第二个 ng-repeat 在 HTML 中处理所有内容，该 ng-repeat 按当前类别过滤产品，如下所示:

<tr ng-repeat="category in categories">
  <td>{{category.id}}</td>
  <td>{{category.name}}</td>
  <td>
    <table>
      <tr ng-repeat="product in products | filter: {categoryId: category.id}">
        <td>{{ product.name}}</td>
        </tr>
    </table>
  </td>
</tr>

这是一个工作 plunk .