javascript - 在 ng-repeat 中绑定(bind)来自不同请求的数据

Question

在我的页面上，我正在渲染包含 6 个类别的面板。类别来自 api 调用:

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

在此请求中，我有 angular.forEach 循环，其中我分别为每个类别发送 api 请求

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

现在一切看起来都不错，$scope.getLength 的控制台日志返回 6 个不同的数组 $scope.getLength.length 返回这些数组的长度

现在我在页面上渲染表格

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

这就是我的麻烦点。如何将数组的长度与类别名称绑定(bind)？现在，每个类别名称仅显示相同的长度。预先感谢您

Answer 1

您可以创建一个具有长度的对象映射类别 ID，并在每次请求后加载值。

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

然后像这样渲染它:

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