ng-repeatで異なるリクエストのデータをバインドする

Question

私のページでは、6つのカテゴリのパネルをレンダリングしています。私は今、すべてがよさそうだ、コンソール用に別途

angular.forEach($scope.categories, function (category) { 

    var queryString = '?categoryId=', 
     url = urlData + queryString; 

    var getArrayLength = function(url){ 
     $http.get(url) 
      .then(function success(response) { 
       $scope.getLength = response.data; 
       console.log($scope.getLength) 

      }, function error(response) { 
       console.log("error in getting length", response) 
      }); 
    }; 

    getArrayLength(url + category.id); 

    category.selected = $scope.selectedAllCat; 
}); 

各カテゴリのAPIリクエストを送信しています、私はangular.forEachループを持って、この要求、内部

var getCategories = function (customUrl) { 

    $http.get(customUrl).then(function success(response) { 
     $scope.categories = response.data; 
     // console.log($scope.categories); 
     // **** 
    }, 
    function error(response) { 
     console.log("It has happened error in categories response", response) 
    }); 
}; 

：カテゴリは、API呼び出しから来ますこれらのアレイ用$scope.getLength戻っ6つの異なるアレイ$scope.getLength.length戻っ長は

今、私は

ように私のページの表をレンダリングするよためにログインします210

<div class="panel-body"> 
<table class="table"> 
    <tr> 
     <td class="col-md-1"><input type="checkbox" 
      ng-model="selectedAllCat" 
      ng-click="selectAllCat()">&nbsp;</td> 
     <td class="col-md-9">All</td> 
     <td class="col-md-2"> 
      {{ initialDataLength.length }} 
     </td> 
    </tr> 
    <tr ng-repeat="category in categories | orderBy : 'id' "> 
     <td class="col-md-1"> 
      <input type="checkbox" 
       ng-model="category.selected" 
       ng-click="updateFilter(category.id)">&nbsp; 
     </td> 
     <td class="col-md-9">{{ category.name }}</td> 
     <td class="col-md-2"> 
          {{ getLength.length }} 
     </td> 
    </tr> 
</table> 

これは私の問題点です。どのように配列の長さをカテゴリ名にバインドできますか？これで、各カテゴリ名に同じ長さしか表示されません。事前にありがとう

Answer 1

長さを持つオブジェクトマッピングカテゴリIDを作成し、各要求後に値をロードできます。あなたは同様にあなたの個々のカテゴリオブジェクトにlengthプロパティをバインドすることができます

<td class="col-md-9">{{ category.name }}</td> 
<td class="col-md-2">{{ categoryLengths[category.id] }}</td> 

Answer 2

：

$scope.categoryLenghts = {}; 
angular.forEach($scope.categories, function (category) { 

    var queryString = '?categoryId=', 
     url = urlData + queryString; 

    var getArrayLength = function(url){ 
     $http.get(url) 
      .then(function success(response) { 
       $scope.getLength = response.data; 
       $scope.categoryLengths[category.id] = response.data // Save category length 
       console.log($scope.getLength) 

      }, function error(response) { 
       console.log("error in getting length", response) 
      }); 
    }; 
    getArrayLength(url + category.id); 

    category.selected = $scope.selectedAllCat; 
}); 

次に、このようにそれをレンダリングします。

angular.forEach($scope.categories, function (category) { 
    var queryString = '?categoryId=', 
    url = urlData + queryString; 

    var getArrayLength = function(url){ 
    $http.get(url) 
     .then(function success(response) { 
      category.categoryLength = response.data.length; 
      //console.log($scope.getLength) 

     }, function error(response) { 
      console.log("error in getting length", response) 
     }); 
}; 
getArrayLength(url + category.id); 
category.selected = $scope.selectedAllCat; 
}); 

そして

<tr ng-repeat="category in categories | orderBy : 'id' "> 
    <td class="col-md-1"> 
     <input type="checkbox" 
      ng-model="category.selected" 
      ng-click="updateFilter(category.id)">&nbsp; 
    </td> 
    <td class="col-md-9">{{ category.name }}</td> 
    <td class="col-md-2">{{ category.categoryLength }} </td> 
</tr>