Infinite loop when ng-repeat/ng-class calls a function which calls $http

Question

If you have no idea what this is, please read this :Infinite loop with Angular expression binding

In the html file:

<ui ng-repeat="carrierDetail in carrierDetails">
    <li>
        <i ng-class="{'icon-sign-blank':getStatus(carrierDetail.carrierId)==0,'icon-green':getStatus(carrierDetail.carrierId)==1,'icon-orange':getStatus(carrierDetail.carrierId)==2,'icon-red':getStatus(carrierDetail.carrierId)==3}"></i>
        <ul ng-repeat="owner in getOwners(carrierDetail.carrierId)">
            <li>{{owner.ownerName}}</li>
        </ul>
    </li>
</ui>

As you see, a function getStatus() is called in ng-class and another function getOwners() is called in ng-repeat. And, both functions will call $http service:

$scope.getOwners = function(carrierId) {
    $http.get($scope.baseurl.smart,carrierId,1).then(function(data) {
        return data.data.carrierOwners; // Returns an aray
    }, function(data) {
        return [];
    });
}

$scope.getStatus = function(carrierId) {
    $http.get($scope.baseurl.smart,carrierId,1).then(function(data) {
        return [1, 2, 3].indexOf(data.data.carrierStatus) != -1 ? data.data.carrierStatus : 0; // Returns an integer
    }), function(data) {
        return 0;
    };
}

So, I already know that there are infinite calls for both functions. But I cannot come up with a solution. Maybe I can create a directive for either of the function. But I have no idea how to use the directive in ng-class or ng-repeat. Are there any simpler ways? Thanks.

It seems your code is all wrong. You are putting function calls into ng-repeat, functions which run http requests, quite a bad way to go. I'll see if I can't help you out though. — SoluableNonagon, Dec 23 '15 at 17:37
I know I'm not giving an answer here, but first thing that comes to mind is making an http call for every iteration in ng-class seems excessive. As for the function call in ng-repeat, if you must make a call (again for every iteration), like you said, create a directive and pass in the carrierDetail.carrierId. Create a jsfiddle if you'd like us to review and revise. — Will, Dec 23 '15 at 17:38
@SoluableNonagon Yes. But I have to do that because I need to iterate into the array to get carrierId and pass this carrierId to the functiion to get an new array. — 6324, Dec 23 '15 at 17:39
Then the carrierId should be read in the controller, not in the html — SoluableNonagon, Dec 23 '15 at 17:39
@SoluableNonagon Yes! You remind me of doing that. I can iterate into the array first in the controller and run functions for each id and store the results. Thanks so much! — 6324, Dec 23 '15 at 17:43

score 0 · Accepted Answer · answered Dec 23 '15 at 17:46

First, your html should not be calling functions pretty much ever (except for on click or something like that.

<ui ng-repeat="carrierDetail in carrierDetails">
    <li>
        <i ng-class="{'icon-sign-blank':carrierDetail.carrierId==0,'icon-green':carrierDetail.carrierId==1,'icon-orange':carrierDetail.carrierId==2,'icon-red':carrierDetail.carrierId==3}"></i>
        <ul ng-repeat="owner in owners">
            <li>{{owner.ownerName}}</li>
        </ul>
    </li>
</ui>

The JS, the general idea is:

// assuming controller defined:
$scope.carriers = some kind of array;

$scope.getOwners = function(carrierId) {
    $http.get($scope.baseurl.smart,carrierId,1).then(function(data) {
        return data.data.carrierOwners; // Returns an arary
    }, function(data) {
        return [];
    });
}

$scope.getStatus = function(carrierId) {
    $http.get($scope.baseurl.smart,carrierId,1).then(function(data) {
        return [1, 2, 3].indexOf(data.data.carrierStatus) != -1 ? data.data.carrierStatus : 0; // Returns an integer
    }), function(data) {
        return 0;
    };
}



for( var i in $scope.carriers){

    $scope.getOwners( $scope.carriers[ i ].carrierId ).then(function(success){
        // add data to array
    });

}

Infinite loop when ng-repeat/ng-class calls a function which calls $http

1 Answers1

Linked