AngularJsで無限スクロールを実装しています。以下の関数は、成功したAJAX呼び出しで呼び出されます。AngularJSで更新されないビュー
- ユーザーが画面の最後までスクロールします。
- いくつかのフィルタを選択し、「検索」ボタンを押します。
最初のケースでは、AJAX呼び出しからフェッチされたデータが既存のリストに追加されます。 2番目のケースでは、リスト内の既存のデータを完全に空にして新しいデータを表示するつもりです。ここではそれを行うには、私のコードは次のとおりです。
ので$scope.successCallBack=function(data){
$('#spn-model-buffering-image').hide(); //hide the loading spinner icon
if($scope.providersList === null) {
$scope.providersList = []; /* init if null */
}
if($scope.scrolled === 'true'){
/*If it was an scroll-end event, then simply append the new data to the existing one*/
Array.prototype.push.apply($scope.providersList, JSON.parse(data.serviceproviderlist)); //push the new data to the existing list
}
else{
/*If the user clicks on "Search Providers" button, then new data are fetched, and occupy the entire list view*/
$scope.providersList=[];
$scope.providersList=JSON.parse(data.serviceproviderlist);
}
viewToBeDisplayed(LIST_VIEW);
$scope.scrolled='true';
}
、成功したAJAX呼び出しの後、上記のメソッドが呼び出されます。バッファリングされたイメージを隠し、変数scrolledがtrueに設定されているかどうかを確認します。 「はい」の場合、イベントはボタンクリックではなく、ユーザーが画面の最後に達したため、データを追加する必要があります。それ以外の場合は、ユーザーがボタンをクリックしたため、データを新しく表示する必要があります。
これは、ボタンクリックイベントで呼び出される関数です。
$scope.getFilteredData=function(){
$scope.scrolled='false';
$scope.getMoreData();
}
私の問題:ビューは更新されません。 AJAX呼び出しはJSONとしてデータを返します。スクロールイベントでは、期待通りにデータがフェッチされ、既存のリストに追加されます。 私が間違っていることを誰かに教えてもらえますか?ありがとう!ここで
は、AJAX呼び出しコードです:
$scope.getMoreData=function(){
$('#spn-model-buffering-image1').show(); //while the data are being fetched, display the loading spinner
$scope.updateAjaxData(); //update AJAX data: pagekey, category, and reftag
var url=$scope.getURL();
A.ajax(url, {
method: 'post',
params: AJAX_DATA,
success: function(data, s, x) {
$scope.successCallBack(data);
},
error: function(xhr, statusText, errorThrown) {
$scope.errorCallback(xhr);
}
});
}
'ajax'呼び出しの代わりに' http'サービスを試してみてください。 '$ scope.successCallBack(data);の後に' scope。$ applay() 'を使用してください。角度のjqueryコードを使うのは良くありません。 –
スコープを使用しています。$ apply()が機能していないようです。 –