ng-repeat / ng-classが$ httpを呼び出す関数を呼び出すときの無限ループ

6324

これが何であるかわからない場合は、これを読んでください:Angular式バインディングを使用した無限ループ

htmlファイル内:

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

ご覧のとおり、で関数getStatus()が呼び出されng-class、で別の関数getOwners()が呼び出されng-repeatます。そして、両方の関数が$httpサービスを呼び出します。

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

したがって、両方の関数が無限に呼び出されることはすでに知っています。しかし、私は解決策を思い付くことができません。たぶん、どちらかの関数のディレクティブを作成できます。しかし、ng-classまたはでディレクティブを使用する方法がわかりませんng-repeatもっと簡単な方法はありますか?ありがとう。

SoluableNonagon

まず、あなたのhtmlはかなりの関数を呼び出すべきではありません今までに(そのようなクリックや何かのため除きます。

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

JS、一般的な考え方は次のとおりです。

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

}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

データが入力されたときにng-repeatを呼び出す方法は?

分類Dev

ng-repeatで関数を呼び出す方法

分類Dev

ng-repeat内で初期化関数を呼び出す

分類Dev

ng-repeatで関数を呼び出しますか?

分類Dev

ng-repeat で関数を呼び出す方法は?

分類Dev

ng-repeatループ内のメソッドを呼び出す

分類Dev

AngularJS:ng-repeat内でコントローラー関数を呼び出す

分類Dev

ng-repeat を使用して HTML で関数を呼び出すと、JSON 配列値が HTML フォームに渡されません。

分類Dev

ng-repeat内のAngularjs関数が何度も呼び出されました

分類Dev

ng-repeatからのデータでスコープ関数を呼び出す方法は?

分類Dev

ng-repeat内の親スコープで定義された関数を呼び出す

分類Dev

コントローラ関数を呼び出すng-classの使用方法

分類Dev

Angular jsを使用してng-repeatと併用する場合は関数を1回呼び出す

分類Dev

ng-showがトリガーされたときに関数を呼び出しますか?

分類Dev

Angularのng-repeat内で別の関数を呼び出すにはどうすればよいですか?

分類Dev

4回呼び出されたng-repeat内の関数(AngularJs)

分類Dev

AngularJSは、ng-repeatで生成された要素で変数の引数関数呼び出しを渡します

分類Dev

カスタムディレクティブのリンク関数は、ng-repeatが置き換えられる前に呼び出されます

分類Dev

相対関数がトリガーされないのにng-repeatが呼び出されるのはなぜですか?

分類Dev

ng-repeat呼び出しコントローラーの機能が多すぎる

分類Dev

ng-repeatとjsTree

分類Dev

ng-repeatのAngularJSDatePicker

分類Dev

関数呼び出しでng-classを使用する-複数回呼び出される

分類Dev

ng-repeat内でAPI関数呼び出しを行う方法は?

分類Dev

角度でng-repeatを使用したng-class評価

分類Dev

ng-repeatで関数を使用すると、無限のダイジェストループが発生します

分類Dev

AngularJS ng-class inside ng-repeat expression

分類Dev

ng-repeatおよびng-modelを使用してsplice()を呼び出すと、ホームページへの角度リダイレクト

分類Dev

ng-repeatループ内のng-clikc関数を使用したng-showおよびng-hide

Related 関連記事

  1. 1

    データが入力されたときにng-repeatを呼び出す方法は?

  2. 2

    ng-repeatで関数を呼び出す方法

  3. 3

    ng-repeat内で初期化関数を呼び出す

  4. 4

    ng-repeatで関数を呼び出しますか?

  5. 5

    ng-repeat で関数を呼び出す方法は?

  6. 6

    ng-repeatループ内のメソッドを呼び出す

  7. 7

    AngularJS:ng-repeat内でコントローラー関数を呼び出す

  8. 8

    ng-repeat を使用して HTML で関数を呼び出すと、JSON 配列値が HTML フォームに渡されません。

  9. 9

    ng-repeat内のAngularjs関数が何度も呼び出されました

  10. 10

    ng-repeatからのデータでスコープ関数を呼び出す方法は?

  11. 11

    ng-repeat内の親スコープで定義された関数を呼び出す

  12. 12

    コントローラ関数を呼び出すng-classの使用方法

  13. 13

    Angular jsを使用してng-repeatと併用する場合は関数を1回呼び出す

  14. 14

    ng-showがトリガーされたときに関数を呼び出しますか?

  15. 15

    Angularのng-repeat内で別の関数を呼び出すにはどうすればよいですか?

  16. 16

    4回呼び出されたng-repeat内の関数(AngularJs)

  17. 17

    AngularJSは、ng-repeatで生成された要素で変数の引数関数呼び出しを渡します

  18. 18

    カスタムディレクティブのリンク関数は、ng-repeatが置き換えられる前に呼び出されます

  19. 19

    相対関数がトリガーされないのにng-repeatが呼び出されるのはなぜですか?

  20. 20

    ng-repeat呼び出しコントローラーの機能が多すぎる

  21. 21

    ng-repeatとjsTree

  22. 22

    ng-repeatのAngularJSDatePicker

  23. 23

    関数呼び出しでng-classを使用する-複数回呼び出される

  24. 24

    ng-repeat内でAPI関数呼び出しを行う方法は?

  25. 25

    角度でng-repeatを使用したng-class評価

  26. 26

    ng-repeatで関数を使用すると、無限のダイジェストループが発生します

  27. 27

    AngularJS ng-class inside ng-repeat expression

  28. 28

    ng-repeatおよびng-modelを使用してsplice()を呼び出すと、ホームページへの角度リダイレクト

  29. 29

    ng-repeatループ内のng-clikc関数を使用したng-showおよびng-hide

ホットタグ

アーカイブ