これが何であるかわからない場合は、これを読んでください: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
。もっと簡単な方法はありますか?ありがとう。
まず、あなたの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]
コメントを追加