Question

我有以下关系：类别＆lt; ---＆gt;产品（具有1-N基数）

这是html表中的 ng-repeat 指令

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

所以我需要做的是每当重复列出一个类别时，此类别将立即发送到 getAllProductsByCategory（）函数，然后$ http服务将获得所有产品属于这一特定类别。

我尝试使用 ng-init 指令来执行该功能，但我认为这不是正确的使用方法。有没有更好的方法呢？

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

这是将按类别

获取所有产品的功能

$scope.getAllProductsByCategory = function(category){
$http("getAlProductsByCategory"+category.id){
    .success(function (data, status, headers, config) {
        $scope.products[category.id] = data;
    })
    .error(function (data, status, header, config){
        $log.error("Error");
    });
}

Answer 1

我不知道如何在控制器中拆分数组，以便将每个对象传递给getAllProductsByCategory（类别）

我不建议使用ng-init来调用异步API。在模型视图中，无论是哪种架构，模型都应该驱动视图。视图不应该驱动模型。视图可以收集控制器的用户输入事件。然后，控制器可以使用这些事件来更新模型，必要时使用异步API。

在这种情况下，类别列表可能来自异步API，然后每个类别的产品需要来自异步API。这可以成为chaining promises。

首先创建一个类别承诺：

var categoriesPromise = $http.get(categoriesUrl)
  .then(function (response) {
    var categories = response.data;
    $scope.categories = categories;
    //return to chain categories
    return categories;
}).catch(function (error) {
    console.log("ERROR: ", error.status);
    //throw to chain rejection
    throw error;
});

现在从这个承诺链接：

$scope.products = {};

var productsPromise = categoriesPromise.then(function(categories) {
    var promiseHash = {};
    categories.foreach(function(c) {
        promiseHash[c.id] = getProductsByCategory(c)
          .then(function(products) {
             $scope.products[c.id] = products;
             //return data for chaining
             return products;
        });
    });
    //return $q.all promise for chaining
    return $q.all(promiseHash);
});

有关详细信息，请参阅

Answer 2

ng-init将在开头只执行一次而不是每个类别。我想你要做的是：

<tr ng-repeat="category in categories">
    <td>{{category.name}}</td>
    <td>{{products[category.id]}}</td>
    <script type="text/javascript">
         getAllProductsByCategory({{category}});
    </script>
</tr>

但是有更简单的方法可以做到这一点，而不是为每个类别调用一次，这从性能的角度来看是不好的，比如创建一个类别数组并在控制器中只调用一次，让它们为你做好准备想要使用它们。

使用ng-repeat在每次重复中调用一个函数

2 个答案: