AngularJS：从数组中获取每个对象，然后进行异步调用

Question

我有两个表，分类和具有1-N基数的产品。

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

这是html表

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

这是控制器，但我不知道如何将 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中的所有内容，按当前类别过滤产品，如下所示：

<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。

Answer 2

获得类别之后，为什么不这样做：

categories.forEach(
  category => getProducts(category);
);

getProducts()类似于：

 function getProducts(category){
        $http("getProductsByCategory/"+category.id)
        .success(function(data){
            $scope.product[category.id];
        })
        .error(function(status){
            console.log(status)
        })
    }