調用使用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-重複

回答

相關問題