调用使用NG-重复

在每一个重复的功能，我有以下关系：分类< --->产品（1-N基数）调用使用NG-重复

这是在NG-重复指令HTML表格

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

来源

2016-12-10 wilson

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>

但有更简单的方法来做到这一点，而不是为每个类别，这是坏从性能上看调用一次，例如创建在控制器中只能调用一次类别，并让它们准备好用于您想要使用它们的任何内容。

来源

2016-12-10 14:10:59 TigOldBitties

谢谢你，但我不知道如何在控制器中拆分数组，以便将每个对象传递给getAllProductsByCategory（category）。请与我分享任何相关的例子。 – wilson

不是类别已经是一个数组吗？或者至少是一个枚举，你可以在其中为每个元素调用一些东西，例如lodash https://lodash.com/，但我的观点是你应该调用一个函数，它一次返回所有产品，而不是创建一个发布每个类别并从中获取开销。想象一下你有2000个类别。你真的会打2000个电话给服务器？ – TigOldBitties

请参阅此代码http://plnkr.co/edit/KMz09pJORmtflcl948kU?p=preview – wilson

我不知道如何在控制器拆分阵列，以每个对象传递给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); 
});

欲了解更多信息，请参阅

来源

2016-12-10 18:35:59 georgeawg

嗨，抱歉，延迟的问题，但我有第二个承诺的小问题，我不知道应该在哪里放置“getAlProductsByCategory”+ category.id“请求。如你所知我需要拨打电话到异步API。我有以下错误https://k60.kn3.net/8/1/D/2/0/8/4BB.png任何想法？谢谢。 – wilson

嗨，你看到上面的问题？ – wilson

创建'getProductsByCategory'函数是给读者留下的一个操作符，按照'categoriesPromise'的$ http调用的例子，使用'.then'和'.catch'方法**避免使用' .success'和'.error'方法，因为它们**忽略返回值**并且已被弃用且已从AngularJS 1.6中移除。 – georgeawg

调用使用NG-重复

回答

相关问题